JavaScript 複数チェックボックスを全選択・全解除（複数）

検索や入力フォームで使用するチェックボックスで、全選択・全解除が複数ある場合のサンプルです。

html

<form>
<div>
  <label><input id="checks0" class="" type="checkbox" value="千葉県" onClick="AllChecked(this.id);">千葉県</label>
  <label><input class="checks0" type="checkbox" name="name" value="千葉県知事" onClick="DisChecked('checks0');">千葉県知事</label>
  <label><input class="checks0" type="checkbox" name="name" value="千葉市長" onClick="DisChecked('checks0');">千葉市長</label>
</div>
<div>
  <label><input id="checks1" class="" type="checkbox" value="千葉市" onClick="AllChecked(this.id);">千葉市</label>
  <label><input class="checks1" type="checkbox" name="ku" value="中央区" onClick="DisChecked('checks1');">中央区</label>
  <label><input class="checks1" type="checkbox" name="ku" value="花見川区" onClick="DisChecked('checks1');">花見川区</label>
  <label><input class="checks1" type="checkbox" name="ku" value="稲毛区" onClick="DisChecked('checks1');">稲毛区</label>
  <label><input class="checks1" type="checkbox" name="ku" value="若葉区" onClick="DisChecked('checks1');">若葉区</label>
  <label><input class="checks1" type="checkbox" name="ku" value="緑区" onClick="DisChecked('checks1');">緑区</label>
  <label><input class="checks1" type="checkbox" name="ku" value="美浜区" onClick="DisChecked('checks1');">美浜区</label>
</div>
</form>

ポイント

全選択のidと、個別選択するclassを同じ名称にします。

全選択するものに挿入するonClick

onClick="AllChecked(this.id);"

個別選択するもの挿入するonClick。引数に、全選択のid名を入れます。

onClick="DisChecked('checks1');"

JavaScript

<script>
// onClick="AllChecked(this.id);"を記載したidと同じ名前のclaaaのあるチェックボックス全てにチェックが付く
function AllChecked(checks){
  var all = document.getElementById(checks).checked;
  var checks = document.getElementsByClassName(checks);
  var checksArray = Array.prototype.slice.call(checks);
  for (var i=0; i<checksArray.length; i++){
    checksArray[i].checked = all;
  }
}

// 一つでもチェックを外すと「onClick="DisChecked('checks1');"」の引数で指定したidのチェック外れる
function DisChecked(checks){
  // console.log(checks);
  var all = document.getElementById(checks);
  var checks = document.getElementsByClassName(checks);
  var checksArray = Array.prototype.slice.call(checks);
  var checksCount = 0;
  for (var i=0; i<checksArray.length; i++){
    if(checksArray[i].checked == false){
      all.checked = false;
    }else{
      checksCount += 1;
      if(checksCount == checks.length){
        all.checked = true;
      }
    }
  }
}
</script>

このままコピペしてOKです。