About Multiple Checkboxes on the Same Page

We are creating a site using html.Place multiple check boxes in the table of the application form on the page
"I would like to be able to ""select all"" for each item, but
" Currently, all check boxes for all items are selected.
What should I do to make them select everything for each item?Sorry for the rudimentary question.
Thank you for your cooperation. (I have copied and placed several of the following statements.)

<form id="mailform" method="post" action="cgi-bin/mailform8/send.cgi"onsubmit="return sendmail(this);">
<tr>
<td class="lead12px">First semester: Basic <br>span class="lead10px"> (check the time limit you want to take)</span></td>
<td colspan="3">
<fieldset><label><span class="lead12px">
<input id="checkAll" type="checkbox" name="First term of the semester: Basic "value="All selected">
Select all </span></label>
<span class="lead12px">br>
<label>
<input class="checks" type="checkbox" name="First semester: basic" value="0 time limit">
0 Time </label>
<label>
<input class="checks" type="checkbox" name="First semester: Basic edition" value="1 time limit">
1 time limit </label>
<label>
<input class="checks" type="checkbox" name="First term of the semester: Basic "value="2 hours">
2 TIMES </label>
</fieldset>

<script>
// Select All checkboxes
let checkAll = document.getElementById("checkAll";
// Check box other than Select All
letel= document.getElementsByClassName("checks");

// Turn all check boxes on/off
const funcCheckAll=(bool)=>{
for (leti=0;i<el.length;i++) {
el[i].checked=bool;
}
}

// Turn on/off the "Select All" check state in the check state of the element with the "checks" class
const funcCheck=()=>{
let count = 0;
for (leti=0;i<el.length;i++) {
if(el[i].checked){
count+=1;
}
}

if(el.length===count){
checkAll.checked=true;
} else{
checkAll.checked=false;
}
};

// When you click the "Select All"
checkAll.addEventListener("click",()=>{
funcCheckAll(checkAll.checked);
}, false);

// When you click the check box other than Select All
for (leti=0;i<el.length;i++) {
el[i].addEventListener("click", funcCheck, false);
}
</script></td>
</tr>

javascript

2022-11-02 00:20

1 Answers

id="checkAll"
class="checks"
Why don't we just change the parts for each item and set the same number of JS settings?

 for (let item of ['1', '2', '3']) {
  // Select All checkboxes
  let checkAll = document.getElementById("checkAll" + item);
  // Check box other than Select All
  letel= document.getElementsByClassName("checks"+item);

  // be exactly the same as below

  // Turn all check boxes on/off
  const funcCheckAll=(bool)=>{
  for (leti=0;i<el.length;i++) {
  el[i].checked=bool;
  }
  }

  // Turn on/off the "Select All" check state in the check state of the element with the "checks" class
  const funcCheck=()=>{
  let count = 0;
  for (leti=0;i<el.length;i++) {
  if(el[i].checked){
  count+=1;
  }
  }

  if(el.length===count){
  checkAll.checked=true;
  } else{
  checkAll.checked=false;
  }
  };

  // When you click the "Select All"
  checkAll.addEventListener("click",()=>{
  funcCheckAll(checkAll.checked);
  }, false);

  // When you click the check box other than Select All
  for (leti=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">First semester: Basic <br>span class="lead10px"> (check the time limit you want to take)</span></td>
<td colspan="3">
<fieldset><label><span class="lead12px">
<input id="checkAll1" type="checkbox" name="First semester: Basic "value="All selected">
Select all </span></label>
<span class="lead12px">br>
<label>
<input class="checks1" type="checkbox" name="First semester: basic"value="0 time limit">
0 Time </label>
<label>
<input class="checks1" type="checkbox" name="First semester: basic"value="1 time limit">
1 time limit </label>
<label>
<input class="checks1" type="checkbox" name="First semester: Basic "value="2 hours">
2 TIMES </label>
</fieldset>
</td>
</tr>

<tr>
<td class="lead12px">First semester: Basic <br>span class="lead10px"> (check the time limit you want to take)</span></td>
<td colspan="3">
<fieldset><label><span class="lead12px">
<input id="checkAll2" type="checkbox" name="First term of the semester: Basic "value="All selected">
Select all </span></label>
<span class="lead12px">br>
<label>
<input class="checks2" type="checkbox" name="First semester: basic"value="0 time limit">
0 Time </label>
<label>
<input class="checks2" type="checkbox" name="First semester: basic"value="1 time limit">
1 time limit </label>
<label>
<input class="checks2" type="checkbox" name="First semester: Basic "value="2 hours">
2 TIMES </label>
</fieldset>
</td>
</tr>

<tr>
<td class="lead12px">First semester: Basic <br>span class="lead10px"> (check the time limit you want to take)</span></td>
<td colspan="3">
<fieldset><label><span class="lead12px">
<input id="checkAll3" type="checkbox" name="First semester: Basic "value="All selected">
Select all </span></label>
<span class="lead12px">br>
<label>
<input class="checks3" type="checkbox" name="First semester: basic"value="0 time limit">
0 Time </label>
<label>
<input class="checks3" type="checkbox" name="First semester: basic"value="1 time limit">
1 time limit </label>
<label>
<input class="checks3" type="checkbox" name="First semester: Basic "value="2 hours">
2 TIMES </label>
</fieldset>
</td>
</tr>

2022-11-02 00:20

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656