0

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>

1 件の回答 1

0

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

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);
  }
}
<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>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。