【Javascript】複数のチェックボックスの全選択・全解除
入力フォームでよくある、全選択・全解除のチェックボックスのサンプルです。
色んな方法がありますが、今回は<input>
の属性name
が全て同じだった場合を記載しています。
参考ページに色んな方法が書いてあるので、状況に応じて使いこなしてみてください。
<form name="form"> <label> <input type="checkbox" name="all" onClick="AllChecked();" />全て選択 </label> <p> <label> <input type="checkbox" name="test" value="TEST1" onClick="DisChecked();" />TEST1 </label> <label> <input type="checkbox" name="test" value="TEST2" onClick="DisChecked();" />TEST2 </label> <label> <input type="checkbox" name="test" value="TEST3" onClick="DisChecked();" />TEST3 </label> <label> <input type="checkbox" name="test" value="TEST4" onClick="DisChecked();" />TEST4 </label> </p> </form> <script language="JavaScript" type="text/javascript"> <!-- // 「全て選択」チェックで全てにチェック付く function AllChecked(){ var all = document.form.all.checked; for (var i=0; i<document.form.test.length; i++){ document.form.test[i].checked = all; } } // 一つでもチェックを外すと「全て選択」のチェック外れる function DisChecked(){ var checks = document.form.test; var checksCount = 0; for (var i=0; i<checks.length; i++){ if(checks[i].checked == false){ document.form.all.checked = false; }else{ checksCount += 1; if(checksCount == checks.length){ document.form.all.checked = true; } } } } // --> </script>
参考
複数のチェックボックスを同時にチェックする 全選択チェックボックス - [サンプルコード /JavaScript] ぺんたん info