sample: toggle multiple checkboxes via name

by sii_side

HTML

<button onclick="checkAll();">toggle</button>
<input type="checkbox" name="aaa-123">
<input type="checkbox" name="aaa-124">
<input type="checkbox" name="aaa-125">
<input type="checkbox" name="bbb-123">
<input type="checkbox" name="bbb-124">
<input type="checkbox" name="bbb-125">

JavaScript

function checkAll() {
  var c = document.querySelectorAll("[name^=aaa-]");
  //nameがaaa-で始まる要素

  var chk = document.querySelectorAll("[name^=aaa-]:checked");
  //nameがaaa-で始まる要素のうちチェック済の要素

  var i;
  if(c.length === chk.length) {      //全てチェック
    for(i = 0; i < c.length; i++) {
      c[i].checked = false;          //全て解除
    }
  } else {                           //1つ以上未チェック
    for(i = 0; i < c.length; i++) {
      c[i].checked = true;           //全てチェック
    }
  }
}