Checked checkbox for specific td that works with filter button

November 18, 2022

I have post a question which is this one previous question. And there another thing that I want to add but the td background won’t change without pressing the checkbox directly.

-Specific td background will change once checkbox is checked.
-But if I press a button which will check all the checkbox. The background won’t change.

====ejs code====

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link type="text/css" rel="stylesheet" href="views/css/index.css">
    </head>
    <body>
        <form name='formMassCheckIn'>
            <input type='button' value='Check All' onclick='js_select_all(this)'/> 
            <table id="myTable">
                <tr>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                    <th>4</th>
                    <th>5</th>
                    <th>6</th>
                    <th>7</th>
                    <th>8</th>
                    <th>9</th>
                    <th>10</th>
                </tr>
                <% for(let a = 0; a < 10; a ++){ %>
                    <tr>
                        <td id="first">X</td>
                        <td id="first">X</td>
                        <td>X</td>
                        <td>X</td>
                        <td><input type="checkbox"  name='circSelected'></td>
                        <td>X</td>
                        <td>X</td>
                        <td>X</td>
                        <td>X</td>
                        <td><input type="checkbox"  name='circSelected'></td>                </tr>
                <% } %>
            </table>
        </form>
    </body>
</html>

====javascript====

function js_select_all(btn){
    if (btn.value == "Check All") 
    {
        for (var i=0 ; i < document.formMassCheckIn.circSelected.length ; i++) {
        if(!document.formMassCheckIn.circSelected[i].checked)
            document.formMassCheckIn.circSelected[i].checked = true;
        
        }
        btn.value ="Uncheck All";
    } else 
    {
        for (var i=0 ; i < document.formMassCheckIn.circSelected.length ; i++) {
        if (document.formMassCheckIn.circSelected[i].checked)
            document.formMassCheckIn.circSelected[i].checked = false;
        }
        btn.value = "Check All";
    } 
    }   

    const markUpTo = 5;
    
    document.querySelectorAll('#myTable input').forEach((btn, i) => {
        btn.addEventListener("change", () => {
            for(let a = i * markUpTo; a < (i * markUpTo + markUpTo); a ++){
                document.querySelectorAll('#myTable tr td')[a].classList.toggle('selected');
            }
        });
    });

====css====

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    width: 10%;
}

td {
    text-align: center;
    border: 1px solid black;
}

.selected {
    background: red;
}

Able to change specific td background.

-Directly check the checkbox or click the filter button(check all).

>Solution :

Take a look at my function, I also removed onClick and replaced it with eventListener which is preferred.

const markUpTo = 5;

document.querySelectorAll('#myTable input').forEach((btn, i) => {
  btn.addEventListener("change", () => {
    for (let a = i * markUpTo; a < (i * markUpTo + markUpTo); a++) {
      document.querySelectorAll('#myTable tr td')[a].classList.toggle('selected');
    }
  });
});

// Simulate a click for all inputs
const checkAllBoxes = () => document.querySelectorAll('#myTable input').forEach(input => input.click());

// Attach the event on input
document.getElementById('checkAll').addEventListener('click', () => checkAllBoxes());

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  width: 10%;
}

td {
  text-align: center;
  border: 1px solid black;
}

.selected {
  background: red;
}

<form name='formMassCheckIn'>
  <input type='button' value='Check / Uncheck All' id='checkAll' />
  <table id="myTable">
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>8</th>
      <th>9</th>
      <th>10</th>
    </tr>
    <tr>
      <td id="first">X</td>
      <td id="first">X</td>
      <td>X</td>
      <td>X</td>
      <td><input type="checkbox" name='circSelected'></td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td><input type="checkbox" name='circSelected'></td>
    </tr>
  </table>
</form>