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コードも変更することになります。

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

スポンサードサーチ

シェアする

  • このエントリーをはてなブックマークに追加

フォローする