JQuery: Change the color of the row inside a table based on the checkbox click

Question

I have a table that has huge set of data. Now what i want to do is when user will uncheck the checkbox of that specific row, i want to change the color to grey. What i have done till now:

$('tr').click(function () {
    if(this.style.background == "" || this.style.background =="white") {
        $(this).css('background', 'grey');
    }
    else {
        $(this).css('background', 'white');
    }   
});

$(".uncheck").change(function(){
    alert("cehc");
    var ischecked= $(this).is(':checked');
    alert(ischecked);
    if(!ischecked){
        $(this).css('background', 'grey');
    }
    else{
        $(this).css('background', 'white');
    }
});

The above functions i have written that work properly individually though. Its like The first function will work when i click on row and second function puts an alert on unchecking the checkbox but does not change the color to grey.

How to identify if a specific checkbox has been unchecked on a row of a table and change that row color to grey?

add a JSfiddle

Vikrant
– Vikrant

2016-11-08 06:37:53 +00:00
Commented Nov 8, 2016 at 6:37 — Vikrant
– Vikrant, Commented Nov 8, 2016 at 6:37

Justinas · Accepted Answer · 2016-11-08 06:42:37Z

Try using single function and use css classes for that:

$(document).ready(function() {
  $('tr').click(function() {
    var inp = $(this).find('.check');
    var tr = $(this).closest('tr');
    inp.prop('checked', !inp.is(':checked'))

    tr.toggleClass('isChecked', inp.is(':checked'));
  });

  // do nothing when clicking on checkbox, but bubble up to tr
  $('.check').click(function(e) {
    e.preventDefault();
  })
})

.isChecked {
  background-color: grey;
}
table {
  width: 100%;
  border-collapse: collapse;
}
tr {
  background-color: #fafafa;
}
/* click-through element */
.check {
  pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="checkbox" class="check">
    </td>
    <td></td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="check">
    </td>
    <td></td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="check">
    </td>
    <td></td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="check">
    </td>
    <td></td>
  </tr>
</table>

Christos · Accepted Answer · 2016-11-08 06:47:26Z

4

The this in change refers to the checkbox and not to the row. You could target your row using the closest method:

$(this).closest('tr').css('background', 'grey');

$('tr').click(function () {
    if(this.style.background == "" || this.style.background =="white") {
        $(this).css('background', 'grey');
    }
    else {
        $(this).css('background', 'white');
    }   
});

$(".uncheck").change(function(){
    alert("check change");
    var ischecked= $(this).is(':checked');
    alert(ischecked);
    if(!ischecked){
        $(this).closest('tr').css('background', 'grey');
    }
    else{
        $(this).closest('tr').css('background', 'white');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
      <tr>
         <td><input type="checkbox" class="uncheck"/></td>
         <td>1</td>
         <td>1</td>
         <td>1</td>
      </tr>
    </tbody>
</table>

edited Nov 8, 2016 at 6:47

answered Nov 8, 2016 at 6:38

Christos

54.1k9 gold badges82 silver badges114 bronze badges

2 Comments

Justinas Over a year ago

When clicking on <td>1</td> it will not trigger change function as in OP question

Christos Over a year ago

@Justinas I didn't added this since OP said it works. But will do right now.

Aniket Sahrawat · Accepted Answer · 2016-11-08 06:40:05Z

3

Try this:

$(".uncheck").change(function(){
    $(this).toggleClass('grey white')
});

This should be your css

.grey { background: grey; }
.white { background: white; }

answered Nov 8, 2016 at 6:40

Aniket Sahrawat

13k3 gold badges44 silver badges69 bronze badges

Comments

SURJEET SINGH Bisht · Accepted Answer · 2016-11-08 06:39:39Z

1

you can check the checkbox property:

    $(".uncheck").change(function(){
     alert("cehc");
      var ischecked= $(this).prop('checked');
      alert(ischecked);
      if(!ischecked){
      $(this).parent().closest('tr').css('background', 'grey');
   }
   else{
     $(this).parent().closest('tr').css('background', 'white');
   }
  });

answered Nov 8, 2016 at 6:39

SURJEET SINGH Bisht

88110 silver badges16 bronze badges

Comments

Vikrant · Accepted Answer · 2016-11-08 06:52:09Z

1

If you have checkbox inside <table>, then You can use below code:

$(".uncheck").change(function(){
    var ischecked= $(this).is(':checked');
    if(!ischecked){
      $(this).closest('tr').css('background', 'grey');
    }
    else{
      $(this).closest('tr').css('background', 'white');
    }
});

Working Demo

edited Nov 8, 2016 at 6:52

answered Nov 8, 2016 at 6:44

Vikrant

5,05218 gold badges53 silver badges77 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

on() any checkbox that triggers the change event do this:

Use this closest('tr') and .find('td') to .css('background','grey')

SNIPPET

$('input[type="checkbox"]').on('change', function(e) {
  var self = this;
  if (!self.checked) {
    $(this).closest('tr').find('td').css('background', 'grey');
  }
});

table,
th,
td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>CHX</th>
      <th>Col1</th>
      <th>Col2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type='checkbox' checked>
      </td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>
        <input type='checkbox' checked>
      </td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>
        <input type='checkbox' checked>
      </td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>
        <input type='checkbox' checked>
      </td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>
        <input type='checkbox' checked>
      </td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>
        <input type='checkbox' checked>
      </td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>
        <input type='checkbox' checked>
      </td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>
        <input type='checkbox' checked>
      </td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan='3'>&nbsp;</td>
    </tr>
  </tfoot>

Collectives™ on Stack Overflow

JQuery: Change the color of the row inside a table based on the checkbox click

6 Answers 6

Comments

2 Comments

Comments

Comments

Comments

SNIPPET

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

Comments

Comments

Comments

SNIPPET

Comments

Your Answer

Sign up or log in

Post as a guest

Related