Javascript によるチェックボックスの個数や値の取得、オン・オフの切り替えを行うサンプルスクリプトを掲載しています。
チェックボックスの個数と値の取得
スポンサーリンク
<body> <input type="button" onclick="confirmChecked();" value="チェックされているフルーツを確認する" /> <input type="checkbox" name="fruit" value="apple" /> リンゴ <input type="checkbox" name="fruit" value="melon" /> メロン <input type="checkbox" name="fruit" value="banana" /> バナナ </body>
function confirmChecked() { // チェックボックス要素をすべて取得する var boxes = document.getElementsByName("fruit"); // チェックボックスの個数を取得する var cnt = boxes.length; for(var i=0; i<cnt; i++) { if(boxes.item(i).checked) { alert(boxes.item(i).value + 'はチェックされています'); } else { alert(boxes.item(i).value + 'はチェックされていません'); } } }
チェックボックスのオン・オフの切り替え
上記のサンプルスクリプトではオン・オフの確認を行っているだけですが、 以下のように checked プロパティに true / false を設定することで切り替えを行うことができます。
boxes.item(i).checked = true; // チェックボックスをオン boxes.item(i).checked = false; // チェックボックスをオフ
ラジオボタン
上記のサンプルではチェックボックスですが、type 属性が radio のラジオボタンの場合でも同様にチェックの ON / OFF の取得・設定が可能です。