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 の取得・設定が可能です。