チェックボックスの一括チェック、一括解除をチェックボックスで操作する方法
この前も書いたんですが、jQueryの方がかなーーりすっきりするのでこっちで。
それになんかjQueryで書くと直感的でわかりやすいなぁ。。って思うのはうちがデザイナーかぶれやからなんかな。
jQueryで実装してみる
<script type="text/javascript"> //全選択チェックボックス用処理 function allCheck() { if ($("#allcheck").is(":checked")) { $(".onecheck").attr("checked", true); } else { $(".onecheck").attr("checked", false); } } //個別選択チェックボックス用処理 function oneCheck() { var count = $(".onecheck").length; for (var i=0; i<count; i++) { if (!$(".onecheck").eq(i).is(":checked")) { $("#allcheck").attr("checked", false); return; } } $("#allcheck").attr("checked", true); } </script> <form action="" method="post" name="form1"> <input id="allcheck" type="checkbox" name="" onclick="allCheck();">全選択<br> <input class="onecheck" type="checkbox" name="" onclick="oneCheck();">チェック1<br> <input class="onecheck" type="checkbox" name="" onclick="oneCheck();">チェック2<br> <input class="onecheck" type="checkbox" name="" onclick="oneCheck();">チェック3 </form>
比較用に以前のコードも
普通にjavascriptのコード。
<script type="text/javascript"> //一括チェック用チェックボックス function allcheck() { var count = document.form1.chk.length; var allcheck = document.form1.chk_all.checked; for ( var i=0; i<count; i++) { var check = document.form1.chk[i].checked; if (allcheck == true) { document.form1.chk[i].checked = true; } else { document.form1.chk[i].checked = false; } } } //個別チェック用チェックボックス function check(onjCheck) { if (onjCheck.checked == false) { document.form1.chk_all.checked = false; return; } var count = document.form1.chk.length; for (var i=0; i<count; i++) { if (document.form1.name != "chk_all" && document.form1.chk[i].checked == false) { return; } } document.form1.chk_all.checked = true; } </script> <form action="" method="post" name="form1"> <input type="checkbox" name="chk_all" onclick="allcheck();">全選択<br> <input type="checkbox" name="chk" onclick="check(this);">チェック1<br> <input type="checkbox" name="chk" onclick="check(this);">チェック2<br> <input type="checkbox" name="chk" onclick="check(this);">チェック3 </form>