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

前提

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

実現したいこと

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

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

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

該当のソースコード

受講学期 第一期:基礎編(受講をご希望される時限にチェックする) 全て選択する 0時限 1時限 2時限 //&#12300;&#20840;&#12390;&#36984;&#25246;&#12301;&#12398;&#12481;&#12455;&#12483;&#12463;&#12508;&#12483;&#12463;&#12473; let checkAll = document.getElementById("checkAll"); //&#12300;&#20840;&#12390;&#36984;&#25246;&#12301;&#20197;&#22806;&#12398;&#12481;&#12455;&#12483;&#12463;&#12508;&#12483;&#12463;&#12473; let el = document.getElementsByClassName("checks"); //&#20840;&#12390;&#12398;&#12481;&#12455;&#12483;&#12463;&#12508;&#12483;&#12463;&#12473;&#12434;ON/OFF&#12377;&#12427; const funcCheckAll = (bool) => { for (let i = 0; i < el.length; i++) { el[i].checked = bool; } } //&#12300;checks&#12301;&#12398;class&#12434;&#25345;&#12388;&#35201;&#32032;&#12398;&#12481;&#12455;&#12483;&#12463;&#29366;&#24907;&#12391;&#12300;&#20840;&#12390;&#36984;&#25246;&#12301;&#12398;&#12481;&#12455;&#12483;&#12463;&#29366;&#24907;&#12434;ON/OFF&#12377;&#12427; 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; } }; //&#12300;&#20840;&#12390;&#36984;&#25246;&#12301;&#12398;&#12481;&#12455;&#12483;&#12463;&#12508;&#12483;&#12463;&#12473;&#12434;&#12463;&#12522;&#12483;&#12463;&#12375;&#12383;&#26178; checkAll.addEventListener("click",() => { funcCheckAll(checkAll.checked); },false); //&#12300;&#20840;&#12390;&#36984;&#25246;&#12301;&#20197;&#22806;&#12398;&#12481;&#12455;&#12483;&#12463;&#12508;&#12483;&#12463;&#12473;&#12434;&#12463;&#12522;&#12483;&#12463;&#12375;&#12383;&#26178; for (let i = 0; i < el.length; i++) { el[i].addEventListener("click", funcCheck, false); }

試したこと

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

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

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

コメントを投稿

0 コメント