選択状態のチェックボックスだけを取得する

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

複数選択できるチェックボックスから、選択した項目だけを取得するときは次の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に入れます。

コード例

// 「興味・関心のある分野」のチェックボックス
let input_interestings = document.querySelectorAll("input[name=interesting]:checked");

if( 0 < input_interestings.length ) {

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


// 「どこで知りましたか？」のチェックボックス
let input_triggers = document.querySelectorAll("input[name=trigger]:checked");

if( 0 < input_triggers.length ) {

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

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

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

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

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

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

コード例

let checked_data = new Array();

// 「興味・関心のある分野」のチェックボックス
let input_interestings = document.querySelectorAll("input[name=interesting]");

if( 0 < input_interestings.length ) {

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

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


// 「どこで知りましたか？」のチェックボックス
let input_triggers = document.querySelectorAll("input[name=trigger]");

if( 0 < input_triggers.length ) {

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

	for(let 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文の条件式で参照することで、選択状態になっているチェックボックスの値だけを取り出すことができます。

チェック状態が変化したら選択されたチェックボックスを取得する

最後に、チェックボックスのinput要素にイベントリスナー「change」を設定し、チェック状態が変化したらget_checked関数を呼び出して選択状態のチェックボックスのvalue属性を出力する方法を解説します。

なお、今回はチェックボックスが「興味・関心のある分野」と「どこで知りましたか？」の2つのグループに分かれているため、呼び出すget_checked関数の中でグループ内のチェックボックスのみを出力するようにしています。

コード例

// 「興味・関心のある分野」のチェックボックス
let input_interestings = document.querySelectorAll("input[name=interesting]");

if( 0 < input_interestings.length ) {

	for(let checked_data of input_interestings) {

		checked_data.addEventListener('change', (e) => {
			get_checked(e.target);
		});
	}
}


// 「どこで知りましたか？」のチェックボックス
let input_triggers = document.querySelectorAll("input[name=trigger]");

if( 0 < input_triggers.length ) {

	for(let checked_data of input_triggers) {

		checked_data.addEventListener('change', (e) => {
			get_checked(e.target);
		});
	}
}


// チェック状態が変わったら呼び出す関数
let get_checked = (e) => {

	let parent_div = e.closest('div');
	let inputs = parent_div.querySelectorAll("input:checked");

	for(let checked_data of inputs) {
		console.log(checked_data.value); // 選択されたチェックボックスのvalue属性を出力する
	}
}

get_checked関数はチェックボックスの親要素にあたるdiv要素を取得し、親要素の子孫要素にあたるチェック状態のinput要素を全て取得します。
その後のfor文では、取得したinput要素を1つずつ取り出してvalue属性を出力しています。

以上、選択状態のチェックボックスだけを取得する方法でした。