HTMLで全て選択のチェックボックスの実装をしたい

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
HTMLでチェックボックスと、全て選択というチェックボックスを実装したい

JQueryはわからないため、JavaScriptを使用

発生している問題・エラーメッセージ

チェックボックスが全て選択とTEST1だけの場合、
どちらにもチェックされていない状態で、全て選択をチェックしてもTEST1にチェックが入らず、
どちらもチェックしている状態でTEST1のチェックボックスを外しても全て選択からチェックが外れない

複数ある場合は問題なくチェックが入る

該当のソースコード

<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>

試したこと

下記Webページ参照

http://labyrinth-of-wisdom.hatenadiary.com/entry/2016/07/20/202324

補足情報（FW/ツールのバージョンなど）

HTML5

Answer 1

こんにちは

ご質問にあるコードに最低限の修正をして、意図通りに動作させるには、以下のように修正すればよいかと思います。

function AllChecked(){
    var all = document.form.all.checked;
+   var checks = document.querySelectorAll("input[name=test]");
-   for (var i=0; i<document.form.test.length; i++) {
-       document.form.test[i].checked = all;
+   for (var i=0; i<checks.length; i++){
+       checks[i].checked = all;
    }
}

function DisChecked(){
-   var checks = document.form.test;
+   var checks = document.querySelectorAll("input[name=test]");

(※ご質問にあるコードでは、DisCheckedの直前が全角スペースになっているようです。)

上記のように修正する理由としては、name="test" のチェックボックスが複数あるとき、

document.form.test

は、配列に似た RadioNodeListオブジェクトであるので、ご質問のコードにあるようなforループで各要素を取得できますが、name="test" のチェックボックスが1個のときは、要素が1個のRadioNodeListではなく、そのチェックボックス要素自体であるために、後のforループが意図した動作にならないからです。ですので、1個の場合も複数の場合も、ご質問にあるfor文で意図通りの動作をさせるためには、上記のDiffで示したとおり、該当要素が1個の場合も、配列に似たオブジェクトを返してくれる、querySelectorAll を使うように修正すれば問題は解決すると思います。

以上、参考になれば幸いです。

追記

リファクタリング案を挙げておきます。

var testChecks = [...document.querySelectorAll("input[name=test]")];

function AllChecked() {
    var { checked } = document.form.all;
    testChecks.forEach(test => {
        test.checked = checked;
    });
}

function DisChecked() {
    document.form.all.checked = testChecks.every(test => test.checked);
}

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/pogRKRm?editors=1010

Comments

[thyda.eiqau]

回答の論旨に対するコメントではありませんが、function　DisChecked(){の全角スペースも要修正と思います。
→と思ったら追記のところで修正されてました。diffのところだけ見ていました。失礼しました。

[jun68ykt]

@thyda.eiqauさん
コメントありがとうございます。念のため、2つ目のDiffの後に注記しておきました。

Answer 2

こんな感じで

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const all=document.querySelector('#all');
  const tests=document.querySelectorAll('.test');
  all.addEventListener('change',e=>{
    if(e.target.checked){
      tests.forEach(x=>{
        x.checked=true;
      });
    }
  });
  tests.forEach(x=>{
    x.addEventListener('change',e=>{
      if(!e.target.checked){
        all.checked=false;
      }
    });
  });
});
</script>
<form name="form">
<label><input type="checkbox" name="all" id="all">全て選択</label>
<p>
<label><input type="checkbox" class="test" name="test" value="TEST1">TEST1</label>
<label><input type="checkbox" class="test" name="test" value="TEST2">TEST2</label>
<label><input type="checkbox" class="test" name="test" value="TEST3">TEST3</label>
<label><input type="checkbox" class="test" name="test" value="TEST4">TEST4</label>
</p>
</form>

Answer 3

「document.form.test」がダメなのはもう書いてあるからいいとして

「どれか外した時に[すべて選択]のチェック外す」
書いてないけど「全部つけた時に[すべて選択]のチェックつける」
こんなことやるくらいならボタンでよくない？元も子もない話だけど。

[すべて選択]のボタン押したら、全部つけて終わり！じゃダメなの？

Answer 4

別な解法です。
個人的にはHTML文書の中に onclick="~~~~" を書き込むのは好きではありません。
というか「書き込むべきではない派」です。
そして使いまわしの利かない関数（それ専用）を書くのは、
「いい加減卒業しろよ派」です。
同じような関係を複数指定する場合に便利ですよ。

<body>
  <form name="form">
    <p><label><input type="checkbox" name="all">全て選択</label>
    <p>
      <label><input type="checkbox" name="test" value="TEST1">TEST1</label>
      <label><input type="checkbox" name="test" value="TEST2">TEST2</label>
      <label><input type="checkbox" name="test" value="TEST3">TEST3</label>
      <label><input type="checkbox" name="test" value="TEST4">TEST4</label>

    <p><label><input type="checkbox" name="all1">全て選択</label>
    <p>
      <label><input type="checkbox" name="test1" value="TEST1">TEST1</label>
      <label><input type="checkbox" name="test1" value="TEST2">TEST2</label>

  </form>

<script>
class A {
  constructor (parent, child) {
    this.parent = parent;
    this.child = [...child];

    parent.form.addEventListener ('click', this, false);
  }

  handleEvent ({target: e}) {
    if (e === this.parent)
      this.child.forEach (o=> o.checked = e.checked);
    else if (this.child.includes (e))
      this.parent.checked = this.child.every (o=> o.checked);
  }

  static create (pname, cname) {
    let
      parent = document.querySelector (`input[name="${pname}"]`),
      child = document.querySelectorAll (`input[name="${cname}"]`);

    if (! parent || ! child)
      throw new Error;

    return new A (parent, child);
  }
}

A.create ('all', 'test');
A.create ('all1', 'test1');
</script>