「JavaScript チェックボックス」とかで検索すると,チェックボックスを全部チェックする方法云々な話が割とたくさん見つかります。これって需要あるのかしらん。
ということで,少しサンプル。Firefox 2.0 と InternetExplorer 6 で動作確認しました。ついでに,チェックボックスに手でチェックを入れると,チェックボックスの値をアラートで表示します(こっちの方が需要があると思うんだけど)。いきなりガビーンとアラートが出るけれども,びっくりしないでください。
ソースはこちら。
<script type="text/javascript" language="JavaScript">
window.onload = function() {
// get checkbox checked/unchecked event
var achkFooBar = document.getElementsByName("foobar");
var chkFooBar = null;
for (i = 0; i < achkFooBar.length; i++) {
chkFooBar = achkFooBar[i];
chkFooBar.onclick = function() {
if (this.checked) {
alert(this.value + " has been checked.");
} else {
alert(this.value + " has been unchecked");
}
};
}
// set all the checkboxes checked
var btnCheck = document.getElementById("allCheck");
btnCheck.onclick = function() {
var achkFooBar = document.getElementsByName("foobar");
for (i = 0; i < achkFooBar.length; i++) {
achkFooBar[i].checked = true;
}
return;
}
// set all the checkboxes unchecked
var btnUnCheck = document.getElementById("allUnCheck");
btnUnCheck.onclick = function() {
var achkFooBar = document.getElementsByName("foobar");
for (i = 0; i < achkFooBar.length; i++) {
achkFooBar[i].checked = false;
}
return;
}
}
</script>
<p>
<input type="checkbox" name="foobar" value="1001"/>
<input type="checkbox" name="foobar" value="1002"/>
<input type="checkbox" name="foobar" value="1003"/>
<input type="checkbox" name="foobar" value="1004"/>
<input type="checkbox" name="foobar" value="1005"/>
</p>
<p>
<input type="button" id="allCheck" value="check"/>
<input type="button" id="allUnCheck" value="uncheck"/>
</p>
特に難しいことはしていないので,いちいち書くことでもないんですけどね。こゆもんは小ネタとして持っておくと,いざというときに何かと便利だったりします。何が「いざ」なんだかよく分からんですけど。