Sample
HTML
フォームの name="chbox" と onClick="ohter_check(this)", onClick="all_check(this)" に注目です。
name="chbox" はフォームの名前、onClick はクリックされたときの動作で、引数に(this) を渡しています。
<form action="#" method="get" name="chbox"> <label><input type="checkbox" name="ck[]" value="" onClick="other_check(this)" />チェック1</label> <label><input type="checkbox" name="ck[]" value="" onClick="other_check(this)" />チェック2</label> <label><input type="checkbox" name="ck[]" value="" onClick="other_check(this)" />チェック3</label> <label><input type="checkbox" name="ck[]" value="" onClick="other_check(this)" />チェック4</label> <label><input type="checkbox" name="ck[]" value="" onClick="other_check(this)" />チェック5</label> <label><input type="checkbox" name="ch_all" onClick="all_check(this)" />全て選択</label>
Java Script
all_check(obAll) と other_check(obCh) の2つがあります。
all_check(obAll) は引数で得たオブジェクト、そのチェック状態をフォーム内の全てのチェックボックスに適用します。
other_check(obCh) は全て選択ではないチェックボックスがクリックされたときの動作です。
<script type="text/javascript" language="javascript">
<!--
// 全て選択
function all_check(obAll) {
for (var i = 0; i < document.chbox.length; i++) {
if (document.chbox[i].type == "checkbox") {
document.chbox[i].checked = obAll.checked;
}
}
}
// 全て選択以外のチェックボックスの処理
function other_check(obCh) {
if (obCh.checked == false) {
document.chbox.ch_all.checked = false;
return;
}
for (var i = 0; i < document.chbox.length; i++) {
// チェックボックスなら
if (document.chbox[i].type == "checkbox") {
// 全て選択以外のチェックボックスに選択されていないものがあったら
if (document.chbox[i].checked == false && document.chbox[i].name != "ch_all") {
return;
}
}
}
// 全て選択をチェックする
document.chbox.ch_all.checked = true;
}
// -->
</script>
備考
複数のフォームがある場合は、そのフォームの名前も引数として渡してやると同じものを書かずに済みます。
また、この方法以外には 全て選択 と 全て選択解除 の両方のボタンを用意してやるやり方もありますが、個人的にはこのやり方の方が好きです。