ここでは、JavaScript でチェックボックスがチェックされているかどうかを判定する方法について説明します。チェックボックスの状態を取得するためには、input 要素オブジェクトの checked プロパティを使います。
チェックボックスに同じ name 属性が付与されている場合
ひとまとまりのチェックボックスに対して同じ name 属性が与えられている場合、name 属性を使って各チェックボックスを特定し、それぞれのチェックボックスの checked プロパティが true か否かを順番に調べます。次のサンプルプログラムを見てみましょう。
HTML
|
1 2 3 4 5 6 |
<form name="form1"> <input type="checkbox" name="fruits" value="りんご">りんご<br> <input type="checkbox" name="fruits" value="バナナ">バナナ<br> <input type="checkbox" name="fruits" value="オレンジ">オレンジ<br> <input type="button" value="選択" onclick="myCheck();"> </form> |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function myCheck() { var flag = false; // 選択されているか否かを判定する変数 for (var i = 0; i < document.form1.fruits.length; i++) { // i番目のチェックボックスがチェックされているかを判定 if (document.form1.fruits[i].checked) { flag = true; alert(document.form1.fruits[i].value + "が選択されました。"); } } // 何も選択されていない場合の処理 if (!flag) { alert("項目が選択されていません。"); } } |
任意のチェックボックスがチェックされているか否かはチェックボックスを表すinput要素オブジェクトのcheckedプロパティで判定します。checkedは、チェックボックスがチェックされていればtrueを返し、チェックされていなければfalseを返します。
任意のチェックボックスは、以下のようにして特定します。
|
1 |
document.フォームのname.チェックボックスのname[] |
例えば、一番目の「りんご」のチェックボックスがチェックされているか否かは次のように記述します。
|
1 |
document.form1.fruits[0].checked |
上記のサンプルでは、for文を用いて各チェックボックスがチェックされているかどうかを順番に判定しています。
name 属性が付与されていない場合
チェックボックスに name 属性が付与されていない場合は、elements[] を使ってチェックボックスを特定します。
HTML
|
1 2 3 4 5 6 |
<form name="form1"> <input type="checkbox" name="fruits" value="りんご">りんご<br> <input type="checkbox" name="fruits" value="バナナ">バナナ<br> <input type="checkbox" name="fruits" value="オレンジ">オレンジ<br> <input type="button" value="選択" onclick="myCheck();"> </form> |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function myCheck() { var flag = false; // elements にはボタンの要素も含まれてしまうため -1 しています for (var i = 0; i < document.form1.elements.length - 1; i++) { if (document.form1.elements[i].checked) { flag = true; alert(document.form1.elements[i].value + "が選択されました。"); } } if (!flag) { alert("項目が選択されていません。"); } } |
elements[]は form の要素（ここでは input タグ）を配列の形で持つため、name 属性が付与されていなくとも各チェックボックスを特定し、各チェックボックスがチェックされているかを順番に判定しています。
