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>