【初心者向け】HTMLのチェックボックスの値をJavaScriptで取得・設定する手順を徹底解説

<p>選択した値 <span id="selectedValues"></span></p>
<form name="checkboxForm">
  <label><input type="checkbox" name="checkItem" value="お肉" checked />お肉</label>
  <label><input type="checkbox" name="checkItem" value="ウインナー" />ウインナー</label>
  <label><input type="checkbox" name="checkItem" value="厚切りベーコン" />厚切りベーコン</label>
</form>
<input type="button" value="Click" onclick="getSelectedValues()" />

UIHACK 編集長

解説

• <form name=”checkboxForm”>：チェックボックスが含まれるフォームを定義しています。このフォームには3つのチェックボックスがあります。
• <input type=”checkbox” name=”checkItem” value=”ウインナー” />：checked属性により初めからチェックされている状態になっています。

function getSelectedValues() {
  const selectedValues = [];
  const checkboxes = document.querySelectorAll('input[name="checkItem"]:checked');

  for (let i = 0; i < checkboxes.length; i++) {
    selectedValues.push(checkboxes[i].value);
  }

  document.getElementById("selectedValues").textContent = selectedValues.join(", ");
}

UIHACK 編集長

解説

• 1行目function getSelectedValues() { … }: getSelectedValues:という名前の関数が定義されています。この関数は、ボタンがクリックされたときに呼び出されます。
• 2行目const selectedValues = []; :選択された値を保持するための空の配列selectedValuesが宣言されています。
• 3行目querySelectorAll(‘input[name=”checkItem”]:checked’); :querySelectorAllメソッドを使って、名前が”checkItem”でかつチェックされている（checked属性がある）すべてのinput要素を取得します。これにより、選択されたチェックボックスだけがcheckboxesというNodeList（要素のリスト）として取得されます。
• 5行目for:ループを使って、checkboxesの要素数だけ繰り返します。
• 6行目selectedValues.push(checkboxes[i].value);: ループ内で、選択されたチェックボックスのvalue属性の値をselectedValues配列に追加しています。
• 9行目document.getElementById(“selectedValues”).textContent = selectedValues.join(“, “): ページ上のspan要素（idが”selectedValues”）に、選択された値をカンマ区切りで表示するために、selectedValues配列の要素をカンマ区切りの文字列に変換して代入しています。

これにより、ボタンがクリックされると、選択されたチェックボックスのvalue属性の値が取得され、span要素に表示されます。

<p>チェックボックスを全選択・全解除する:</p>
<form name="checkboxForm">
  <label><input type="checkbox" name="checkItem" value="optionA" />Option A</label>
  <label><input type="checkbox" name="checkItem" value="optionB" />Option B</label>
  <label><input type="checkbox" name="checkItem" value="optionC" />Option C</label>
</form>
<input type="button" value="全選択" onclick="checkAll()" />
<input type="button" value="全解除" onclick="uncheckAll()" />

function checkAll() {
  const checkboxes = document.getElementsByName("checkItem");
  for (let i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = true;
  }
}

function uncheckAll() {
  const checkboxes = document.getElementsByName("checkItem");
  for (let i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = false;
  }
}

<p>チェックボックスがチェックされたかを確認する:</p>
<form name="checkboxForm">
  <label><input type="checkbox" name="checkItem" value="optionA" />Option A</label>
  <label><input type="checkbox" name="checkItem" value="optionB" />Option B</label>
  <label><input type="checkbox" name="checkItem" value="optionC" />Option C</label>
</form>
<input type="button" value="確認する" onclick="checkCheckedStatus()" />

function checkCheckedStatus() {
  const checkboxes = document.getElementsByName("checkItem");
  for (let i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) {
      console.log(checkboxes[i].value + " がチェックされています。");
    } else {
      console.log(checkboxes[i].value + " はチェックされていません。");
    }
  }
}