JavaScriptでチェックボックスのチェックを入れる方法と外す方法

PROGRAM

今回は、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メソッドで取得する要素は複数のため繰返処理が必要です。