チェックボックスの選択状態を取得・変更する

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

フォームの入力項目の1つであるチェックボックスについて、選択状態を取得するときはcheckedプロパティを参照します。
checkedプロパティは選択された状態のときはtrue、選択されていないときはfalseが入ります。

今回は解説用に以下のHTMLコードを使います。
赤字のHTML要素がチェックボックスのHTMLです。

HTMLコード例

<form method="post" action="">
	<label for="agree"><input type="checkbox" id="agree" name="agree" value="1">同意する</label>
</form>

以下の例では上記のチェックボックスにイベントリスナー「change」を登録して、選択したり選択解除があったときに選択状態を取得するように設定します。

コード例

window.addEventListener('DOMContentLoaded', function(){

	// チェックボックスのHTML要素を取得
	let input_agree = document.querySelector("input[name=agree]");

	input_agree.addEventListener('change',function(){
		console.log(this.checked); // 選択されたらtrue、選択解除はfalse
	});
});

1行目はページ読み込み時に実行するイベントリスナーを登録しています。
その中で、まずはquerySelectorメソッドを使ってチェックボックスのHTML要素をname属性から取得します。

続いて、チェックボックスのHTML要素に対してイベントリスナーで「change」を登録します。
これで、チェックボックスが選択されたり選択解除される度にここの中の処理が呼び出されるようなります。

最後に、checkedプロパティを参照して値を出力します。
「this」はイベントリスナーに登録したHTML要素自身（ここではチェックボックス）を指します。

チェックボックスの選択状態を変更する

選択状態を変更するときについても、checkedプロパティから行います。
選択状態にするときはcheckedプロパティにtrueを入れ、選択解除するときはfalseを入れます。

以下の例はページが読み込まれたタイミングでチェックボックスを選択状態に設定します。

コード例

window.addEventListener('DOMContentLoaded', function(){

	// チェックボックスのHTML要素を取得
	let input_agree = document.querySelector("input[name=agree]");

	if( !input_agree.checked ) {
		input_agree.checked = true;
	}
});

if文の条件式でチェックボックスの選択状態を確認します。
falseになっているときのみ、if文の中でtrueを設定して選択状態に変更します。

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

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