JQuery：根据复选框单击更改表中行的颜色

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?

Answer 1

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> 

Answer 2

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> 

Answer 3

Try this:

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

This should be your css

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

Answer 4

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

Answer 5

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

Answer 6

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>