【JS】全選択・全解除を JavaScript で、実装するには

全選択・全解除を JavaScript で、実装する

 * JQuery を使わずに、全選択・全解除を JavaScript で、実装する

サンプル

* ポイントは、全選択対象のname(例だと「name="targetA"」)を同じにする
<html>
<head>
<script language="Javascript">
function SelectAll() {
  var isChecked = document.sampleForm.selectAll.checked;
  for(i = 0; i < document.sampleForm.targetA.length; i++){
    document.sampleForm.targetA[i].checked = isChecked;
  }
}
</script>
</head>
<body>
<form name="sampleForm" action=".">
  <input type="checkbox" name="selectAll" onClick="SelectAll()">全選択・全解除<br>
  <input type="checkbox" name="targetA"><br>
  <input type="checkbox" name="targetA"><br>
  <input type="checkbox" name="targetA"><br>
  <input type="checkbox" name="targetA"><br>
</form>
</body>
</html>

注意1 : inputタグが一つの場合

 * inputタグ(上記の例だと「<input type="checkbox" name="targetA">」がPHPなどで、動的に作成している場合、
  inputタグが一つになってしまったら、上記のJavaScriptが動かなくなるので注意。

サンプル:選択が一つの場合

* ただ、こうなった場合は、全選択・全解除はいらねーだろって話になりそうだが
<html>
<head>
<script language="Javascript">
function SelectAll() {
  var isChecked = document.sampleForm.selectAll.checked;
  <!-- ★ここ★ 配列ではなくなるので、動かなくなることに注意 -->
  document.sampleForm.targetA.checked = isChecked;
}
</script>
</head>
<body>
<form name="sampleForm" action=".">
  <input type="checkbox" name="selectAll" onClick="SelectAll()">全選択・全解除<br>
  <input type="checkbox" name="targetA"><br>
</form>
</body>
</html>

注意2 : inputタグの一部が非活性の場合

 * inputタグの一部が非活性(disabled)場合でも、
  上記のサンプルだとチェックが付く/外れてしまう。(対応が必要)

サンプル:非活性対応版

* disabledだったら、処理を飛ばしている
<html>
<head>
<script language="Javascript">
function SelectAll() {
  var isChecked = document.sampleForm.selectAll.checked;
  for(i = 0; i < document.sampleForm.targetA.length; i++){
    // ★ここを追加した★
    if (document.sampleForm.targetA[i].disabled) {
      continue;
    }
    document.sampleForm.targetA[i].checked = isChecked;
  }
}
</script>
</head>
<body>
<form name="sampleForm" action=".">
  <input type="checkbox" name="selectAll" onClick="SelectAll()">全選択・全解除<br>
  <input type="checkbox" name="targetA" disabled><br>
  <input type="checkbox" name="targetA" ><br>
  <input type="checkbox" name="targetA" disabled checked><br>
  <input type="checkbox" name="targetA"><br>
</form>
</body>

参考文献

http://chaichan.lolipop.jp/qa6500/qa6823.htm