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

Question

我有一个拥有大量数据的android { packagingOptions { exclude 'META-INF/LICENSE.txt' exclude 'META-INF/NOTICE.txt' exclude 'META-INF/INDEX.LIST' } } 。 现在我想要做的是当用户取消选中该特定行的复选框时，我想将颜色更改为灰色。 我到目前为止做了什么：

table

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

如何确定某个表的某一行是否取消选中某个特定复选框并将该行颜色更改为灰色？

Answer 1

this中的change是指复选框而不是行。您可以使用closest方法定位您的行：

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

尝试使用单个函数并使用css类：

＆＃13;

＆＃13;

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

＆＃13;

.isChecked {
  background-color: grey;
}
table {
  width: 100%;
  border-collapse: collapse;
}
tr {
  background-color: #fafafa;
}
/* click-through element */
.check {
  pointer-events: none;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

试试这个：

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

这应该是你的css

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

Answer 4

您可以查看复选框属性：

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

如果您在<table>中有复选框，则可以使用以下代码：

$(".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()触发checkbox事件的任何change执行此操作：

  

使用this closest('tr')和.find('td')与.css('background','grey')

段

＆＃13;

＆＃13;

$('input[type="checkbox"]').on('change', function(e) {
  var self = this;
  if (!self.checked) {
    $(this).closest('tr').find('td').css('background', 'grey');
  }
});

＆＃13;

table,
th,
td {
  border: 1px solid black;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;