〈PR〉プロが選ぶ!2023年最新!おすすめプログラミングスクール比較ガイド

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

本記事は、「チェックボックスの値を取得したい…」と思いつつ

UIHACK
編集長
UIHACK 編集長

・チェックボックスがどのように動作するのか理解したい。
・チェックボックスの値を単一や一括で取得したい。
・チェックボックスを全選択・全解除する方法を理解したい。

上記のような、悩みや疑問を持っている、プログラミングを勉強したい人向け現役エンジニアが解説します。

この記事では、「前半」では「チェックボックスの基本的な動作と実装方法」「後半」では「チェックボックスの値を一括で取得する方法」「全選択・全解除」する方法を詳しく解説します。

プログラミング未経験の方でも、読みやすい内容なので、本記事を読んで未来に向けて、一歩を踏み出しましょう。

それでは、ご一読ください!

HTMLチェックボックスの値とその意味について詳しく解説!知って得するvalue属性の使い方

HTMLチェックボックスは、フォーム内でユーザーに複数の選択肢から選択をさせるための要素です。チェックボックスがチェックされた場合、その値がフォームの送信時にサーバーに送信されます。

ここでは、HTMLチェックボックスの値とその意味について詳しく解説し、value属性の使い方を理解しましょう。

HTMLチェックボックスの基本構造

HTMLチェックボックスの基本的な構造は以下のようになります。

<input type="checkbox" name="option" value="value1"> Option 1
<input type="checkbox" name="option" value="value2"> Option 2
<input type="checkbox" name="option" value="value3"> Option 3

【実行結果】HTMLチェックボックスの基本構造

Option 1 Option 2 Option 3
UIHACK
編集長
UIHACK 編集長

解説

<input>要素type属性に”checkbox”を指定することで、チェックボックスを作成します。
name属性は、チェックボックスが所属するグループを定義します。同じname属性を持つチェックボックスは同じグループに属します。
value属性は、各チェックボックスに割り当てられる値を指定します。

value属性の使い方

value属性は、各チェックボックスが送信する値を定義します。これにより、サーバー側で受け取った値を利用して処理を行うことができます。value属性は任意の値を持つことができ、以下のように設定します。

<input type="checkbox" name="option" value="apple"> Apple
<input type="checkbox" name="option" value="banana"> Banana
<input type="checkbox" name="option" value="orange"> Orange
UIHACK
編集長
UIHACK 編集長

解説

この例では、“apple”“banana”“orange”という値がそれぞれのチェックボックスに割り当てられています。フォームが送信されると、選択されたチェックボックスのvalue属性の値がサーバーに送信されます。

チェックボックスの値とvalue属性の使い方についてのまとめ

・チェックボックスは、フォーム内でユーザーに複数の選択肢から選択をさせるための要素です。
・基本構造は、type属性が”checkbox”のinput要素にname属性とvalue属性を設定することで作成されます。
・value属性は、各チェックボックスが送信する値を定義します。

JavaScriptで複数のチェックボックスの値(value属性)の取得方法

JavaScriptを使ってチェックボックスのvalue属性に設定された値を取得することができます。

この章では、フォーム内の複数のチェックボックスの中から選択された値(value属性)を取得し、選択された値をページ上に表示する機能を実装しています。

【完成デモ】チェックボックスの値(value属性)の取得方法

チェックボックスの値(value属性)を取得する方法の実装の手順

HTML側のコード
<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
編集長
UIHACK 編集長

解説

  • <form name=”checkboxForm”>:チェックボックスが含まれるフォームを定義しています。このフォームには3つのチェックボックスがあります。
  • <input type=”checkbox” name=”checkItem” value=”ウインナー” />checked属性により初めからチェックされている状態になっています。
JavaScript側のコード
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
編集長
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要素に表示されます。

JavaScriptでチェックボックスを全選択・全解除をする方法を解説します。

チェックボックス全選択・全解除する方法を解説いたします。

【完成デモ】チェックボックスを全選択・全解除をする方法

チェックボックスの全選択・全解除機能を実装するには?

以下のHTMLJavaScriptのコードを使って、チェックボックスを全選択・全解除する方法を実装します。

HTML側のコード
<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()" />

HTML側のボタンにはそれぞれonclickイベントが設定されており、ボタンをクリックすることで対応する関数が実行されます。

JavaScript側のコード
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;
  }
}
JavaScriptについて解説

このコードでは、2つの関数であるcheckAll()uncheckAll()が定義されています。


checkAll()関数 : 全てのname=”checkItem”となっているチェックボックスをループで処理し、各チェックボックスのcheckedプロパティをtrueに設定しています。これにより、全てのチェックボックスが選択される(チェックされる)ようになります。
uncheckAll()関数: 同様に全てのname=”checkItem”となっているチェックボックスをループで処理し、各チェックボックスのcheckedプロパティをfalseに設定しています。これにより、全てのチェックボックスの選択が解除されます。


このように、JavaScriptを使ってチェックボックス全選択・全解除することができます。

JavaScriptでチェックボックスにチェックを入れる・外す方法を解説します。

チェックボックスがチェックされたかを真偽値(true/false)で確認する方法を解説いたします。

【完成デモ】チェックボックスにチェックを入れる・外す方法

チェックボックスにチェックを入れる・外す方法を実装するには?

以下のHTMLとJavaScriptのコードを使って、チェックボックスがチェックされたかを確認する方法を実装します。

HTML側のコード:
<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()" />
HTMLについての解説

HTML側のボタンにはonclickイベントが設定されており、ボタンをクリックすることでcheckCheckedStatus()関数が実行されます。

JavaScript
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 + " はチェックされていません。");
    }
  }
}
JavaScriptの解説

このコードでは、checkCheckedStatus()という名前のJavaScript関数が定義されています。


checkCheckedStatus()関数 : 全てのname=”checkItem”となっているチェックボックスをループで処理し、各チェックボックスのcheckedプロパティがtruefalseかに応じて、それぞれ「チェックされています」または「チェックされていません」というメッセージをコンソールに表示します。

HTML側のボタンにはonclickイベントが設定されており、ボタンをクリックすることでcheckCheckedStatus()関数が実行されます。

チェックボックスの値をJavaScriptで取得・設定する手順の結論とまとめ

UIHACK
編集長
UIHACK 編集長

今回は、チェックボックスの値を取得する方法についてご紹介しました。
それでは、最後にもう一度、おさらいしましょう。

本記事で学んだ事
  • HTMLチェックボックスの値とその意味について詳しく解説!知って得するvalue属性の使い方
  • JavaScriptで複数のチェックボックスの値(value属性)の取得方法
  • JavaScriptでチェックボックスを全選択・全解除をする方法を解説します。
  • JavaScriptでチェックボックスにチェックを入れる・外す方法を解説します。

う一度、最初から「HTMLチェックボックスの値とその意味について詳しく解説!知って得するvalue属性の使い方」を読む↑

パスワード確認画面を作成する際に、正しく実装できない方はぜひ以下の記事もご覧ください。

JavaScript関数の意味や使い方がよくわからない方はぜひ以下の記事もご覧ください。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です