JavaScriptでチェックボックスのチェックを入れる方法と外す方法
今回は、JavaScriptでチェックボックスのチェックを入れる方法と外す方法について、それぞれに分け、簡単に解説していきます。
チェックボックスの構造
チェックボックスはHTMLでinputタグで書くことができ、同じグループではname属性の値を同一の値にします。
inputタグのtype属性をcheckboxにし、初期状態でチェックさせておく場合にはcheckedをタグ内の末尾に書きます。
<input type="checkbox" name="language" value="english" checked>英語 <input type="checkbox" name="language" value="french">フランス語 <input type="checkbox" name="language" value="chinese">中国語
上記のコードのように、グループが同じチェックボックスでは、value以外の属性の値は全て同じ値に設定しておきます。
チェックを入れる方法
同じグループの全てのチェックボックスにチェックを入れるには、繰返処理を使う必要があります。
document.getElementsByNameメソッドで取得したチェックボックス全てのcheckedプロパティをtrueに変えます。
var checkbox = document.getElementsByName("language");
for (var i=0;i<checkbox.length;i++){
checkbox[i].checked = true;
}
上記のコードのように、document.getElementsByNameメソッドで取得した要素は複数あるため繰返処理を使います。
チェックを外す方法
同じグループの全てのチェックボックスのチェックを外す際も、繰返処理を使用します。
document.getElementsByNameメソッドで取得したチェックボックス全てのcheckedプロパティをfalseにします。
var checkbox = document.getElementsByName("language");
for (var i=0;i<checkbox.length;i++){
checkbox[i].checked = false;
}
上記のコードのように、document.getElementsByNameメソッドで取得する要素は複数のため繰返処理が必要です。