JavaScript

レシピ

フォーム

選択したチェックボックスだけを取得する

フォームにあるチェックボックスから、選択されたものだけを取得する方法について解説します。

この記事のポイント

  • 選択状態のチェックボックスを取得する方法は擬似クラス「:checked」とcheckedプロパティを使う2種類
  • 擬似クラスを使って選択状態のチェックボックスを取得する方法は手軽で便利

目次

選択したチェックボックスだけ取得する

複数選択できるチェックボックスから、選択した項目だけを取得するときは次の2つの方法があります。

  • querySelectorAllメソッドと擬似クラス「:checked」を組み合わせる
  • checkedプロパティの値を確認する

どちらの方法でもチェックが付いたチェックボックスのみ取得できる点では同じです。
手軽な方法は1つ目ですが、2つ目の方法は同じname属性を持つ全てのチェックボックスを確認するため、選択しなかった項目に対して処理を実行したり等より細かい制御が可能です。

今回は上の2つの方法をそれぞれ解説していきますが、解説用に次のHTMLコードを使います(CSSは省略)。
選択したチェックボックスはchecked属性を付けた状態にしています。

HTMLコード例

<article id="content1">
	<h1>JavaScriptレシピ</h1>
	<form method="post" action="">
		<div>
			<h2>興味・関心のある分野(複数選択可)</h2>
			<label><input type="checkbox" name="interesting" value="1" checked>文学</label>
			<label><input type="checkbox" name="interesting" value="2" checked>数学</label>
			<label><input type="checkbox" name="interesting" value="3">物理</label>
			<label><input type="checkbox" name="interesting" value="4">天文学</label>
			<label><input type="checkbox" name="interesting" value="5" checked>歴史</label>
			<label><input type="checkbox" name="interesting" value="6">コンピューター・プログラミング</label>
			<label><input type="checkbox" name="interesting" value="7">英語</label>
		</div>
		<div>
			<h2>どこで知りましたか?(複数選択可)</h2>
			<label><input type="checkbox" name="trigger" value="1" checked>SNS</label>
			<label><input type="checkbox" name="trigger" value="2">チラシ</label>
			<label><input type="checkbox" name="trigger" value="3">インターネット広告</label>
			<label><input type="checkbox" name="trigger" value="4" checked>友人・知人からの紹介</label>
			<label><input type="checkbox" name="trigger" value="5">テレビCM</label>
			<label><input type="checkbox" name="trigger" value="6">その他</label>
		</div>
	</form>
</article>

ブラウザで表示すると次のような表示になります。

ブラウザの表示例

擬似クラス「:checked」を使って選択されたチェックボックスを取得

querySelectorAllメソッドはCSSのセレクターと同じ書き方でHTML要素を取得しますが、チェックボックスのname属性と擬似クラス「:checked」を組み合わせて指定することで、次のように選択されたチェックボックスに絞り込んで取得できます。

以下の例では「興味・関心のある分野」と「どこで知りましたか?」のそれぞれから、選択状態のチェックボックスのみを取得します。
「興味・関心のある分野」でチェックしている項目は変数input_interestingsに入れ、「どこで知りましたか?」は変数input_triggersに入れます。

コード例

// 興味・関心のある分野
var input_interestings = document.querySelectorAll("input[name=interesting]:checked");

if( 0 < input_interestings.length ) {

	for(var checked_data of input_interestings) {
		console.log(checked_data.value); // 1, 2, 5
	}
}


// どこで知りましたか?
var input_triggers = document.querySelectorAll("input[name=trigger]:checked");

if( 0 < input_triggers.length ) {

	for(var checked_data of input_triggers) {
		console.log(checked_data.value); // 1, 4
	}
}

if文では取得したチェックボックスが1つ以上あるか確認し、その中のfor文で取得した数だけ値(value属性)を出力します。

checkedプロパティを使って選択されたチェックボックスを取得

続いて、checkedプロパティを使って選択されたチェックボックスを取得する方法を解説します。

こちらの方法ではquerySelectorAllメソッドを使って一度全てのチェックボックスを取得してから、ループ処理を使ってcheckedプロパティの値を確認し、選択状態のチェックボックスだけを抜き出していきます。

以下の例は「興味・関心のある分野」と「どこで知りましたか?」のそれぞれのチェックボックスを全て取得し、変数checked_dataに選択された項目だけを入れていきます。

コード例

var checked_data = new Array();

// 興味・関心のある分野
var input_interestings = document.querySelectorAll("input[name=interesting]");

if( 0 < input_interestings.length ) {

	checked_data['interesting'] = new Array();

	for(var data of input_interestings) {
		if( data.checked ) {
			checked_data['interesting'].push(data.value);
		}
	}
}


// どこで知りましたか?
var input_triggers = document.querySelectorAll("input[name=trigger]");

if( 0 < input_triggers.length ) {

	checked_data['trigger'] = new Array();

	for(var data of input_triggers) {
		if( data.checked ) {
			checked_data['trigger'].push(data.value);
		}
	}
}

console.log(checked_data);
// interesting: (3) ["1", "2", "5"]
// trigger: (2) ["1", "4"]

checkedプロパティは選択状態のときはtrue、未選択のときはfalseが入っています。
そこで、上記のようにif文の条件式で参照することで、選択状態になっているチェックボックスの値だけを取り出すことができます。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。