javascript - JQuery:根据复选框单击更改表内行的颜色

Question

我有一个包含大量数据的表。现在我想做的是，当用户取消选中该特定行的复选框时，我想将颜色更改为灰色。到目前为止我做了什么:

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

我编写的上述函数可以单独正常工作。就像是当我单击行时，第一个函数将起作用，第二个函数会在取消选中复选框时发出警报，但不会将颜色更改为灰色。

如何确定表格行上的特定复选框是否已取消选中，并将该行颜色更改为灰色？

Answer 1

尝试使用单一函数并使用 css 类:

$(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>