JavaScript | チェックボックスの状態を取得する方法

2021-07-142021-07-15JavaScript フォーム,JavaScript

JavaScriptでHTMLフォームにあるチェックボックスの状態を取得する方法を紹介しています。

チェックボックスの状態を取得する

JavaScriptでチェックボックスの要素を取得してチェックされているかどうかの状態を取得するサンプルコードです。

サンプルのHTMLではfruitsという名前の属性を持つチェックボックスに3つの選択肢を作成しています。

<input type="checkbox" name="fruits" value="apple" checked>apple
<input type="checkbox" name="fruits" value="banana">banana
<input type="checkbox" name="fruits" value="pine">pine

querySelectorAll()を使って、name属性がfruitsのチェックボックスを取得。

※name属性がチェックボックスでのみ使われているのが確実な場合はinput[type=’checkbox’]は指定しなくても問題ないです

for of文でループさせて取得した要素の情報にあるcheckedを「e.checked」として確認しています。
「e.value」はvalue値でどのチェックボックスか判別する用です。

let targets = document.querySelectorAll(`input[type='checkbox'][name='fruits']`);

for (let e of targets) {
	console.log(e.value, e.checked);
}

コンソールログには以下のような結果が表示されます。

apple true
banana false
pine false

変更があったらイベントを実行して取得する

ユーザーがチェックボックスの値を変更した際にイベントを実行して状態を取得するサンプルコードです。

<input type="checkbox" name="fruits" value="apple" checked>apple
<input type="checkbox" name="fruits" value="banana">banana
<input type="checkbox" name="fruits" value="pine">pine

name属性がfruitsのチェックボックスを取得して、それぞれにaddEventListenerでchangeイベントを作成します。

チェックボックスの値が変更された時に発火して処理内容（サンプルではコンソールログ）を実行します。

let targets = document.querySelectorAll(`input[type='checkbox'][name='fruits']`);

for (let e of targets) {
	e.addEventListener(`change`, () => {
		console.log(e.value, e.checked);
	})

}