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?

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?

• javascript
• jquery
• checkbox

• 1 add a JSfiddle – Vikrant Commented Nov 8, 2016 at 6:37

6 Answers 6

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./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>

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./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>

Try this:

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

This should be your css

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

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');
   }
  });

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

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./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>