CODEWITHSUNDEEP
javascripthtml
eisha enan
eisha enan

Reputation: 41

How can I change background of each table data if the checkbox is checked?

I am trying to make a simple task manager for myself where if I complete doing something I mark the checkbox and the background of that table data changes, and I read that question too: How to change color of my div if check-box is checked? then I wrote something like this:

var cbs = document.querySelectorAll('input[type=checkbox]');
for (var i = 0; i < cbs.length; i++) {
  cbs[i].addEventListener('change', function() {
    if (this.checked) {
      document.getElementById("box").style.backgroundColor = "green";
    } else {
      document.getElementById("box").style.backgroundColor = "transparent";
    }
  });
}
<table border="1">
  <tr>
    <td id="box">
      English<input type="checkbox" name="block" id="block">
    </td>

    <td id="box">
      Math<input type="checkbox" name="block" id="block">
    </td>
    
    <td class="box">
      Physics<input type="checkbox" name="block" id="block">
    </td>
  </tr>
</table>

The problem I am facing is only the first box' background gets changed after checking any of 3 checkboxes as bellow. I just want each box background to change only when it is checked.

Upvotes: 0

Views: 55

Answers (3)

dale landry
dale landry

Reputation: 8610

Use the event.Target to target the element being checked and then set its parentNode/s style. Your querySelectorAll returns a nodeList, you can use nodeList.forEach() on this function to loop over its list of nodes. Then pass the event into the eventListener and use event.target to get the element that is triggering the event.

Also, not sure why you had script tags in the middle of your HTML, no need for that. Place the script either a the bottom of the body or at the top and place a defer attribute. Read me: Script tags MDN

// @ the top of the page in the head tag of the document: 
<script defer>//javascript code</script>

// @ the bottom of the page just above the body tag

  <script>//javascript code</script>
  <body>
<html>



var cbs = document.querySelectorAll('input[type=checkbox]');
cbs.forEach(item =>
  item.addEventListener('change', e =>
    e.target.checked ?
    e.target.parentNode.style.backgroundColor = "green" :
    e.target.parentNode.style.backgroundColor = "transparent"))
<table border="1">
  <tr>
    <td id="box">
      English<input type="checkbox" name="block" id="block">
    </td>
    <td id="box">
      Math<input type="checkbox" name="block" id="block">
    </td>
    <td class="box">
      Physics<input type="checkbox" name="block" id="block">
    </td>
  </tr>
</table>

Upvotes: 1

Spectric
Spectric

Reputation: 31992

Change document.getElementById("box") to this.parentElement; getting the click event target is superfluous.

var cbs = document.querySelectorAll('input[type=checkbox]');
for (var i = 0; i < cbs.length; i++) {
  cbs[i].addEventListener('change', function() {
    if (this.checked) {
      this.parentElement.style.backgroundColor = "green";
    } else {
      this.parentElement.style.backgroundColor = "transparent";
    }
  });
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Task Achievement</title>
</head>
<body>
  <table border="1">
    <tr>
      <td id="box">
        English<input type="checkbox" name="block" id="block">
      </td>
      <td id="box">
        Math<input type="checkbox" name="block" id="block">
      </td>
      <td class="box">
        Physics<input type="checkbox" name="block" id="block">
      </td>
    </tr>
  </table>
</body>
</html>

Upvotes: 1

Amit Gupta
Amit Gupta

Reputation: 252

I have made some changes in your code, let me know if it works -

<!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Task Achievement</title>
        <script>
            function myFunction(item) {
                if (item.checked) {
                    item.parentNode.style.backgroundColor = "green";
                } else {
                    item.parentNode.style.backgroundColor = "transparent";
                }
            }
            
        </script>
    </head>
    <body>
        <table border="1">
            <tr>
                <td id="box">
                    English<input type="checkbox" name="block" id="block" onclick="myFunction(this)">
                </td>
                <td id="box">
                    Math<input type="checkbox" name="block" id="block" onclick="myFunction(this)">
                </td>
                <td class="box">
                    Physics<input type="checkbox" name="block" id="block" onclick="myFunction(this)">
                </td>
            </tr>
        </table>


    </body>
</html>

Upvotes: 0

Related Questions