JavaScriptでチェックボックスの選択状態の取得や変更の検知をする方法

JavaScriptでチェックボックスの選択状態の取得や変更の検知をする

Input要素のtype属性をcheckboxに設定すると、チェックボックスが表示されます。

JavaScriptでは、ユーザーがチェックボックスの値を変更した時の値を参照するためにcheckedプロパティを利用します。

checkedプロパティは真偽値を返します。

また、JavaScriptでチェックボックスの値を変更する際に何らかの処理を実行したい場合にはchangeイベントを利用します。

このイベントを使えば、チェックボックスの値が変わったタイミングで任意の処理を実行することが可能になります。

プロパティ

プロパティー意味
インプット要素.checked選択状態をtrueまたはfalse真偽値
Checkdプロパティの仕様

イベント

イベントプロパティー意味
changeinput要素の変更時に発火
changeイベントの仕様

サンプルコード

サンプルコードとして、チェックボックスの入力結果をそのまま出力するサンプルコードを紹介します。

ページ読み込み時に1度実行し、以降はチェックボックスの状態が変化するたびにテキスト情報を書き換えるようになっています。

Output
Pug
form#targetArea
		.form-check
			input#targetCheckbox.form-check-input(type="checkbox")
			label.form-check-label(for="targetCheckbox") Checkbox
	#targetText
JavaScript
const targetCheckbox = document.getElementById( 'targetCheckbox' );
const targetText = document.getElementById( 'targetText' );


//ページ読み込み時に1度処理
window.addEventListener('DOMContentLoaded', onChange );

//選択肢の変更を検知
targetCheckbox.addEventListener( 'change', onChange );

function onChange() {
	const targetCheckboxValue = targetCheckbox.checked;
	targetText.textContent = `選択状態が${targetCheckboxValue}です。`;
}

インストラクター