JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：Webページを操作できるようになる － Day18.5：フォーム操作②　練習問題

JavaScript JavaScript
スポンサーリンク

Day18.5：フォーム操作②の練習問題

チェックボックスとラジオボタンは、テキスト入力とはまったく違う性質を持つフォーム要素です。
「オンかオフか」「複数選択してよいか」「1つだけ選ぶのか」など、
ユーザーの選択状態を正しく扱うための練習問題をまとめました。

チェックボックスの基本

問題1：チェックされているかどうかでメッセージを変えてください

次の HTML を前提とします。

<label>
  <input id="agreeCheckbox" type="checkbox">
  利用規約に同意します
</label>
<button id="btn">送信</button>
<p id="result"></p>

解答と解説

const agreeCheckbox = document.getElementById("agreeCheckbox");
const btn = document.getElementById("btn");
const result = document.getElementById("result");

btn.addEventListener("click", () => {
  const agreed = agreeCheckbox.checked;

  if (agreed) {
    result.textContent = "同意済みです。送信できます。";
  } else {
    result.textContent = "利用規約に同意してください。";
  }
});
JavaScript

チェックボックスは checked（true / false） を使って状態を判定します。
value ではなく checked を見るのが最重要ポイントです。

チェックボックスの複数選択

問題2：複数のチェックボックスから選択された項目だけを表示してください

次の HTML を前提とします。

<p>好きな言語を選んでください（複数可）</p>
<label><input id="js" type="checkbox" value="JavaScript"> JavaScript</label>
<label><input id="py" type="checkbox" value="Python"> Python</label>
<label><input id="java" type="checkbox" value="Java"> Java</label>

<button id="btn">送信</button>
<p id="result"></p>

解答と解説

const js = document.getElementById("js");
const py = document.getElementById("py");
const java = document.getElementById("java");
const btn = document.getElementById("btn");
const result = document.getElementById("result");

btn.addEventListener("click", () => {
  const selected = [];

  if (js.checked) selected.push(js.value);
  if (py.checked) selected.push(py.value);
  if (java.checked) selected.push(java.value);

  if (selected.length === 0) {
    result.textContent = "何も選択されていません。";
    return;
  }

  result.textContent = `選択された言語：${selected.join("、")}`;
});
JavaScript

チェックボックスは「複数選択可」なので、
checked が true のものを配列にためていくのが基本パターンです。

ラジオボタンの基本

問題3：ラジオボタンで選択された値を表示してください

次の HTML を前提とします。

<p>性別を選択してください</p>
<label><input type="radio" name="gender" value="男性"> 男性</label>
<label><input type="radio" name="gender" value="女性"> 女性</label>
<label><input type="radio" name="gender" value="その他"> その他</label>

<button id="btn">送信</button>
<p id="result"></p>

解答と解説

const btn = document.getElementById("btn");
const result = document.getElementById("result");

btn.addEventListener("click", () => {
  const selected = document.querySelector('input[name="gender"]:checked');

  if (selected === null) {
    result.textContent = "性別が選択されていません。";
    return;
  }

  result.textContent = `選択された性別：${selected.value}`;
});
JavaScript

ラジオボタンは name が同じものの中から 1 つだけ選ばれる 仕組みです。
querySelector('input[name="gender"]:checked') は「選ばれているものだけ」を直接取得できます。

ラジオボタンの未選択チェック

問題4：ラジオボタンが未選択の場合、エラー表示してください

次の HTML を前提とします。

<div id="paymentGroup">
  <p>支払い方法を選択してください</p>
  <label><input type="radio" name="payment" value="カード"> カード</label>
  <label><input type="radio" name="payment" value="銀行振込"> 銀行振込</label>
  <label><input type="radio" name="payment" value="現金"> 現金</label>
</div>

<button id="btn">決定</button>
<p id="result"></p>

解答と解説

const paymentGroup = document.getElementById("paymentGroup");
const btn = document.getElementById("btn");
const result = document.getElementById("result");

btn.addEventListener("click", () => {
  const selected = document.querySelector('input[name="payment"]:checked');

  result.textContent = "";

  if (selected === null) {
    result.textContent = "支払い方法を選択してください。";
    return;
  }

  result.textContent = `選択された支払い方法：${selected.value}`;
});
JavaScript

ラジオボタンは「必ず1つ選んでほしい」場面が多いため、
未選択チェックは実務でも頻繁に使います。

チェックボックスとラジオボタンの組み合わせ

問題5：利用規約チェック＋ラジオボタン選択の両方が正しい場合のみ送信してください

次の HTML を前提とします。

<label id="termsLabel">
  <input id="termsCheckbox" type="checkbox">
  利用規約に同意します
</label>

<div id="contactGroup">
  <p>連絡方法を選択してください</p>
  <label><input type="radio" name="contact" value="メール"> メール</label>
  <label><input type="radio" name="contact" value="電話"> 電話</label>
  <label><input type="radio" name="contact" value="不要"> 不要</label>
</div>

<button id="btn">送信</button>
<p id="result"></p>

解答と解説

const termsCheckbox = document.getElementById("termsCheckbox");
const termsLabel = document.getElementById("termsLabel");
const contactGroup = document.getElementById("contactGroup");
const btn = document.getElementById("btn");
const result = document.getElementById("result");

btn.addEventListener("click", () => {
  const agreed = termsCheckbox.checked;
  const selectedContact = document.querySelector('input[name="contact"]:checked');

  termsLabel.classList.remove("error");
  contactGroup.classList.remove("error-box");
  result.textContent = "";

  let hasError = false;
  let messages = [];

  if (!agreed) {
    hasError = true;
    messages.push("利用規約に同意してください。");
    termsLabel.classList.add("error");
  }

  if (selectedContact === null) {
    hasError = true;
    messages.push("連絡方法を選択してください。");
    contactGroup.classList.add("error-box");
  }

  if (hasError) {
    result.textContent = messages.join(" ");
    return;
  }

  result.textContent = "送信が完了しました。";
});
JavaScript

チェックボックスとラジオボタンを組み合わせると、
「同意＋選択」のような実務的なフォームが作れます。

セキュリティ問題：ユーザー入力を innerHTML に入れない理由

問題6：innerHTML を使うと危険な理由を説明してください

（文章で答える問題）

解答と解説

innerHTML は文字列を「HTML として解釈」するため、
ユーザーが <script>...</script> のような文字列を入力した場合、
それが実行されてしまう危険があります（XSS）。

安全に表示するには textContent を使います。
textContent は「すべてをただの文字として扱う」ため、
どんな入力でも安全に画面へ表示できます。

Day18.5 練習問題まとめ

今回の練習問題で、
チェックボックスの checked（true / false）
ラジオボタンの選択値取得
未選択チェック
複数選択の扱い
classList によるエラー表示
textContent による安全な表示

といったフォーム操作の基礎〜応用がしっかり身につきます。

スポンサーリンク
タイトルとURLをコピーしました