问题

我有一个具有巨大数据量的. 现在我想做的是当用户取消选中该特定行的复选框时,我想将颜色更改为灰色. 我现在所做的一切:

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

以上我已经写过的这些功能可以单独工作.就像是 第一个功能将工作,当我点击行和第二个功能提醒取消选中复选框,但不会将颜色更改为灰色.

如何识别表格的行上是否取消选中某个特定复选框,并将该行颜色更改为灰色?



解决方法

尝试使用单一功能并使用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&#34;></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>




相关问题推荐