JSFiddle - React, Tailwind, and code Playground

by Michel Plungjan

HTML

<body onload="script1();">
    Please check the box if you took a course in the respective subject in that semester.
<table width="200" border="1">
  <tr>
    <th scope="col"></th>
    <th scope="col">8th Sem 1</th>
    <th scope="col">8th Sem 2</th>
    <th scope="col">9th Sem 1</th>
    <th scope="col">9th Sem 2</th>
    <th scope="col">10th Sem 1</th>
    <th scope="col">10th Sem 2</th>
    <th scope="col">11th Sem 1</th>
    <th scope="col">11th Sem 2</th>
    <th scope="col">12th Sem 1</th>
    <th scope="col">12th Sem 2</th>
    <th scope="col">Select All Semesters</th>
  </tr>
  <tr>
    <th scope="row">History</th>
    <td></td>
    <td></td>
    <td><input name="AG[]" type="checkbox" value="A9Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="A9Sem2"></td>
    <td><input name="AG[]" type="checkbox" value="A10Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="A10Sem2"></td>
    <td><input name="AG[]" type="checkbox" value="A11Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="A11Sem2"></td>
    <td><input name="AG[]" type="checkbox" value="A12Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="A12Sem2"></td>
    <td><input type="button" name="CheckAll" value="Check All"></td>
  </tr>
  <tr>
    <th scope="row">English</th>
    <td></td>
    <td></td>
    <td><input name="AG[]" type="checkbox" value="B9Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="B9Sem2"></td>
    <td><input name="AG[]" type="checkbox" value="B10Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="B10Sem2"></td>
    <td><input name="AG[]" type="checkbox" value="B11Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="B11Sem2"></td>
    <td><input name="AG[]" type="checkbox" value="B12Sem1"></td>
    <td><input name="AG[]" type="checkbox" value="B12Sem2"></td>
    <td> <input type="button" name="CheckAll" value="Check All"></td>
  </tr>
  <tr>
    <th scope="row">Mathematics</th>
    <td><input name="AG[]"...

JavaScript

function selectAll(a,b) {
  var checkies = document.getElementsByName('AG[]');
  for (var i = a;i < b;i++) {
    checkies[i].checked = !checkies[i].checked;
  }
}
function script1(){
  var el = document.getElementsByName('CheckAll');  // get all elements with that name="" attribute
  el[0].onclick=function() { selectAll(0,8) }
  el[1].onclick=function() { selectAll(8,16)}
  el[2].onclick=function() { selectAll(16,26)}
  el[3].onclick=function() { selectAll(26,34)}
  el[4].onclick=function() { selectAll(34,44)}
  el[5].onclick=function() { selectAll(44,52)}
  el[6].onclick=function() { selectAll(52,60)}


}