【Javascript】複数のチェックボックスの全選択・全解除

入力フォームでよくある、全選択・全解除のチェックボックスのサンプルです。

色んな方法がありますが、今回は<input>の属性nameが全て同じだった場合を記載しています。

参考ページに色んな方法が書いてあるので、状況に応じて使いこなしてみてください。

---

全て選択

TEST1 TEST2 TEST3 TEST4

<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