フォーム内に複数のチェックボックスがある場合、そのすべてを一度に選択や解除できると便利だ。それをJavaScriptで実装してみる。
まずはフォームの記述。チェックボックスはそれぞれ名前を振っておく。
[サンプル]
<form name="フォームの名前">
<input type="checkbox" name="checkbox1">チェックボックス1<br>
<input type="checkbox" name="checkbox2">チェックボックス2<br>
<input type="checkbox" name="checkbox3">チェックボックス3<br>
<input type="button" value="すべてにチェック" onClick="AllOn()">
<input type="button" value="すべてを解除" onClick="AllOff()">
続いて、以下のスクリプトを<HEAD>～</HEAD>の間に記述。
[サンプル]
<SCRIPT language="JavaScript">
<!--
chn = new Array("checkbox1","checkbox2","checkbox3"); // チェックボックスの名前を記述
// すべてのチェックボックスをチェックする
function AllOn(){
for(i=0; i<chn.length; i++) {
document.フォームの名前.elements[chn[i]].checked = true;
}
}
// すべてのチェックボックスのチェックを解除
function AllOff(){
for(i=0; i<chn.length; i++) {
document.フォームの名前.elements[chn[i]].checked = false;
}
}
//-->
</SCRIPT>
チェックボックスを増やす場合は、chn = new Array("checkbox1","checkbox2","checkbox3");に「,」で区切って追加すれば良い。
フォームの名前は任意で良いが、JavaScript内にもあるので忘れずに。