2

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?

1

6 Answers 6

4

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>

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>

2
  • 1
    When clicking on <td>1</td> it will not trigger change function as in OP question
    – Justinas
    Nov 8, 2016 at 6:45
  • @Justinas I didn't added this since OP said it works. But will do right now.
    – Christos
    Nov 8, 2016 at 6:46
3

Try this:

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

This should be your css

.grey { background: grey; }
.white { background: white; }
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');
   }
  });
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

1

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.