【チェックボックス同一ページ複数設置について】

Question

前提

【チェックボックス複数設置について】
htmlでサイトを作成しております。ページ内の申し込みフォームのテーブルにチェックボックスを複数設置して
各項目毎に「全て選択」ができるようにしたいのですが、
現状は全ての項目のチェックボックスが全て選択されてしまいます。

実現したいこと

各項目毎にそれぞれのチェックボックス全て選択させるにはどうすればいいでしょうか？初歩的な質問ですいません。
よろしくお願いします。（以下のような記述をコピペして複数配置しています）

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

全項目がチェックされてしまいます

該当のソースコード

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

試したこと

ここに問題に対して試したことを記載してください。

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

ここにより詳細な情報を記載してください。

Comments

[yambejp]

「全て選択/全て解除」はチェックボックスじゃなくてボタンの方がよくないですか？

Answer 1

グルーピングして遡ってチェックボックスを探す

<script>
document.addEventListener('click',e=>{
  const t=e.target;
  if(t.matches('.check,.uncheck')){
    t.closest('fieldset').querySelectorAll('[type=checkbox]').forEach(x=>{
      x.checked=t.matches('.check');
    });
  }
});
</script>
<fieldset>
<input type="button" value="全て選択" class="check">
<input type="button" value="全て解除" class="uncheck">
<label><input type="checkbox" value="1">1</label>
<label><input type="checkbox" value="2">2</label>
<label><input type="checkbox" value="3">3</label>
</fieldset>
<fieldset>
<input type="button" value="全て選択" class="check">
<input type="button" value="全て解除" class="uncheck">
<label><input type="checkbox" value="1">1</label>
<label><input type="checkbox" value="2">2</label>
<label><input type="checkbox" value="3">3</label>
</fieldset>
<fieldset>
<input type="button" value="全て選択" class="check">
<input type="button" value="全て解除" class="uncheck">
<label><input type="checkbox" value="1">1</label>
<label><input type="checkbox" value="2">2</label>
<label><input type="checkbox" value="3">3</label>
</fieldset>

カスタムデータとクラスをつかって処理

<script>
document.addEventListener('click',e=>{
  const t=e.target;
  document.querySelectorAll(t.dataset["check"]).forEach(x=>{
    x.checked=true;
  });
  document.querySelectorAll(t.dataset["uncheck"]).forEach(x=>{
    x.checked=false;
  });
});
</script>
<fieldset>
<input type="button" value="全て選択" data-check=".c1">
<input type="button" value="全て解除" data-uncheck=".c1">
<label><input type="checkbox" value="1" class="c1">1</label>
<label><input type="checkbox" value="2" class="c1">2</label>
<label><input type="checkbox" value="3" class="c1">3</label>
</fieldset>
<fieldset>
<input type="button" value="全て選択" data-check=".c2">
<input type="button" value="全て解除" data-uncheck=".c2">
<label><input type="checkbox" value="1" class="c2">1</label>
<label><input type="checkbox" value="2" class="c2">2</label>
<label><input type="checkbox" value="3" class="c2">3</label>
</fieldset>
<fieldset>
<input type="button" value="全て選択" data-check=".c3">
<input type="button" value="全て解除" data-uncheck=".c3">
<label><input type="checkbox" value="1" class="c3">1</label>
<label><input type="checkbox" value="2" class="c3">2</label>
<label><input type="checkbox" value="3" class="c3">3</label>
</fieldset>

Comments

[1256497854]

大変わかりやすい解説助かりました。ありがとうございます！