JavaScriptでチェックボックスの選択状態の取得や変更の検知をする方法
JavaScriptでチェックボックスの選択状態の取得や変更の検知をする
Input要素のtype属性をcheckboxに設定すると、チェックボックスが表示されます。
JavaScriptでは、ユーザーがチェックボックスの値を変更した時の値を参照するためにcheckedプロパティを利用します。
checkedプロパティは真偽値を返します。
また、JavaScriptでチェックボックスの値を変更する際に何らかの処理を実行したい場合にはchangeイベントを利用します。
このイベントを使えば、チェックボックスの値が変わったタイミングで任意の処理を実行することが可能になります。
プロパティ
| プロパティー | 意味 | 型 |
|---|---|---|
| インプット要素.checked | 選択状態をtrueまたはfalse | 真偽値 |
イベント
| イベントプロパティー | 意味 |
|---|---|
| change | input要素の変更時に発火 |
サンプルコード
サンプルコードとして、チェックボックスの入力結果をそのまま出力するサンプルコードを紹介します。
ページ読み込み時に1度実行し、以降はチェックボックスの状態が変化するたびにテキスト情報を書き換えるようになっています。
Output
Pug
form#targetArea
.form-check
input#targetCheckbox.form-check-input(type="checkbox")
label.form-check-label(for="targetCheckbox") Checkbox
#targetTextHTML
<form id="targetArea">
<div class="form-check">
<input class="form-check-input" id="targetCheckbox" type="checkbox"/>
<label class="form-check-label" for="targetCheckbox">Checkbox</label>
</div>
</form>
<div id="targetText"></div>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}です。`;
}
