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

JavaScript でチェックボックスが選択されているかどうかを取得したい場合は、 checked プロパティを利用します。

checked プロパティの値は、チェック時に true、非チェック時に false となります。

ここでは id 属性、name 属性、elements を利用して チェックボックスのチェック状態を取得する方法を説明します。

id 属性を利用して選択状態を取得する

チェックボックスに id 属性がある場合は、 getElementById() メソッドを利用します。

次のようなチェックボックスのコードがあるとします。

「id="chk"」です。

<p><input type="checkbox" id="chk">チェックボックス</p>

この場合、チェックボックスの選択状態を取得する JavaScript のコードは、 次のようになります。

if (document.getElementById("chk").checked){
	// チェックされている場合の処理
}else{
	// チェックされていない場合の処理
}

if 文の条件式部分を短くしたければ、次のようなコードがいいでしょう。

// チェックボックスの状態を取得
var bln = document.getElementById("chk").checked

if (bln) {
	// チェックされている場合の処理
} else {
	// チェックされていない場合の処理
}

name 属性を利用して選択状態を取得する

name 属性がある場合は次のようにチェック状態を取得できます。

document.フォームのname.チェックボックスのname.checked

同じ name のチェックボックスが複数ある場合は次のように取得します。

document.フォームのname.チェックボックスのname[].checked

では具体的に見ていきましょう。

フォーム部分のコードは次のようになっています。

フォームの name が "form0"、チェックボックスの name が "language"。

同じ name のチェックボックスが複数あります。

<form name="form0">
	
	<input type="checkbox" name="language" value="javascript">JavaScript
	<input type="checkbox" name="language" value="python">Python
	
</form>

2つのチェックボックスのうち、 上のチェックボックス「value="javascript"」の選択状態を取得する場合、 次のコードとなります。

if (document.form0.language[0].checked){
	// チェックされている場合の処理
}else{
	// チェックされていない場合の処理
}

document オブジェクトの後に、フォームの name とチェックボックスの name を繋げます。

下のチェックボックス「value="python"」のチェック状態を取得する場合は

document.form0.language[1].checked

となります。

id 属性も name 属性もない場合は？

チェックボックスに id 属性も name 属性もない場合は、 elementsを使って次のように記述します。

document.フォームのname.elements[].checked

フォーム部分のHTML

<form name="form0">
	
	<input type="checkbox" value="javascript">JavaScript
	<input type="checkbox" value="python">Python
	
</form>

上のチェックボックス「value="javascript"」のチェック状態を取得するコードは、 次のようになります。

if (document.form0.elements[0].checked){
	// チェックされている場合の処理
}else{
	// チェックされていない場合の処理
}

まとめ

このように、チェックボックスの選択状態を取得する方法は複数あります。

一番シンプルなのが id 属性で取得する方法です。

それ以外だと、フォーム部品の追加や削除があった場合、 JavaScriptコードも変更することになります。

どの方法で記述するかは、ご自身の環境や制約条件に応じて選択してください。