

htmlでサイトを作成しております。ページ内の申し込みフォームのテーブルにチェックボックスを複数設置して  
各項目毎に「全て選択」ができるようにしたいのですが、  
現状は全ての項目のチェックボックスが全て選択されてしまいます。  
各項目毎に全て選択させるにはどうすればいいでしょうか？初歩的な質問ですいません。  
よろしくお願いします。（以下のような記述をコピペして複数配置しています）

[code]

    <form id="mailform" method="post" action="cgi-bin/mailform8/send.cgi" onsubmit="return sendmail(this);">
    <tr>
    <td class="lead12px">受講学期 第一期：基礎編<br><span class="lead10px">(受講をご希望される時限にチェックする)</span></td>
    <td colspan="3">
    <fieldset><label><span class="lead12px">
    <input id="checkAll" type="checkbox" name="受講学期 第一期：基礎編" value="全て選択しました">
    全て選択する</span></label>
    <span class="lead12px"><br>
    <label>
    <input class="checks" type="checkbox" name="受講学期 第一期：基礎編" value="0時限">
    0時限</label>
    <label>
    <input class="checks" type="checkbox" name="受講学期 第一期：基礎編" value="1時限">
    1時限</label>
    <label>
    <input class="checks" type="checkbox" name="受講学期 第一期：基礎編" value="2時限">
    2時限</label>
    </fieldset>
    
    <script>
    //「全て選択」のチェックボックス
    let checkAll = document.getElementById("checkAll");
    //「全て選択」以外のチェックボックス
    let el = document.getElementsByClassName("checks");
    
    //全てのチェックボックスをON/OFFする
    const funcCheckAll = (bool) => {
    for (let i = 0; i < el.length; i++) {
    el[i].checked = bool;
    }
    }
    
    //「checks」のclassを持つ要素のチェック状態で「全て選択」のチェック状態をON/OFFする
    const funcCheck = () => {
    let count = 0;
    for (let i = 0; i < el.length; i++) {
    if (el[i].checked) {
    count += 1;
    }
    }
    
    if (el.length === count) {
    checkAll.checked = true;
    } else {
    checkAll.checked = false;
    }
    };
    
    //「全て選択」のチェックボックスをクリックした時
    checkAll.addEventListener("click",() => {
    funcCheckAll(checkAll.checked);
    },false);
    
    //「全て選択」以外のチェックボックスをクリックした時
    for (let i = 0; i < el.length; i++) {
    el[i].addEventListener("click", funcCheck, false);
    }
    </script></td>
    </tr>
    
[/code]


CC BY-SA 4.0
2022-11-01T08:42:24.010
91927
2022-11-01T11:32:21.267
2022-11-01T10:29:38.440
2376
55158
question
javascript
チェックボックス同一ページ複数設置について


id="checkAll"  
class="checks"  
の部分だけ項目ごとに変えてその数だけ同じJS設定をかけばいいのでは

[code]

    for(let item of ['1', '2', '3']) {
      //「全て選択」のチェックボックス
      let checkAll = document.getElementById("checkAll" + item);
      //「全て選択」以外のチェックボックス
      let el = document.getElementsByClassName("checks" + item);
    
      // 以下全く同じ
    
      //全てのチェックボックスをON/OFFする
      const funcCheckAll = (bool) => {
      for (let i = 0; i < el.length; i++) {
      el[i].checked = bool;
      }
      }
    
      //「checks」のclassを持つ要素のチェック状態で「全て選択」のチェック状態をON/OFFする
      const funcCheck = () => {
      let count = 0;
      for (let i = 0; i < el.length; i++) {
      if (el[i].checked) {
      count += 1;
      }
      }
    
      if (el.length === count) {
      checkAll.checked = true;
      } else {
      checkAll.checked = false;
      }
      };
    
      //「全て選択」のチェックボックスをクリックした時
      checkAll.addEventListener("click",() => {
      funcCheckAll(checkAll.checked);
      },false);
    
      //「全て選択」以外のチェックボックスをクリックした時
      for (let i = 0; i < el.length; i++) {
      el[i].addEventListener("click", funcCheck, false);
      }
    }
[/code]

[code]

    <form id="mailform" method="post" action="cgi-bin/mailform8/send.cgi" onsubmit="return sendmail(this);">
    <tr>
    <td class="lead12px">受講学期 第一期：基礎編<br><span class="lead10px">(受講をご希望される時限にチェックする)</span></td>
    <td colspan="3">
    <fieldset><label><span class="lead12px">
    <input id="checkAll1" type="checkbox" name="受講学期 第一期：基礎編" value="全て選択しました">
    全て選択する</span></label>
    <span class="lead12px"><br>
    <label>
    <input class="checks1" type="checkbox" name="受講学期 第一期：基礎編" value="0時限">
    0時限</label>
    <label>
    <input class="checks1" type="checkbox" name="受講学期 第一期：基礎編" value="1時限">
    1時限</label>
    <label>
    <input class="checks1" type="checkbox" name="受講学期 第一期：基礎編" value="2時限">
    2時限</label>
    </fieldset>
    </td>
    </tr>
    
    <tr>
    <td class="lead12px">受講学期 第一期：基礎編<br><span class="lead10px">(受講をご希望される時限にチェックする)</span></td>
    <td colspan="3">
    <fieldset><label><span class="lead12px">
    <input id="checkAll2" type="checkbox" name="受講学期 第一期：基礎編" value="全て選択しました">
    全て選択する</span></label>
    <span class="lead12px"><br>
    <label>
    <input class="checks2" type="checkbox" name="受講学期 第一期：基礎編" value="0時限">
    0時限</label>
    <label>
    <input class="checks2" type="checkbox" name="受講学期 第一期：基礎編" value="1時限">
    1時限</label>
    <label>
    <input class="checks2" type="checkbox" name="受講学期 第一期：基礎編" value="2時限">
    2時限</label>
    </fieldset>
    </td>
    </tr>
    
    <tr>
    <td class="lead12px">受講学期 第一期：基礎編<br><span class="lead10px">(受講をご希望される時限にチェックする)</span></td>
    <td colspan="3">
    <fieldset><label><span class="lead12px">
    <input id="checkAll3" type="checkbox" name="受講学期 第一期：基礎編" value="全て選択しました">
    全て選択する</span></label>
    <span class="lead12px"><br>
    <label>
    <input class="checks3" type="checkbox" name="受講学期 第一期：基礎編" value="0時限">
    0時限</label>
    <label>
    <input class="checks3" type="checkbox" name="受講学期 第一期：基礎編" value="1時限">
    1時限</label>
    <label>
    <input class="checks3" type="checkbox" name="受講学期 第一期：基礎編" value="2時限">
    2時限</label>
    </fieldset>
    </td>
    </tr>
[/code]


CC BY-SA 4.0
2022-11-01T11:32:21.267
91932
2022-11-01T11:32:21.267
91927
answer