Question

当选中或取消选中该行中的复选框时，我需要更改整行的样式。

function myFunc() {
    if ($(".chkbx:checked").length) {
        $(this).parent().parent().css("background-color","red");
    } else {
        $(this).parent().parent().css("background-color","green");
    }
}

myFunc();

$(".chkbx").change(myFunc);

<table>
    <tr>
        <td><input type="checkbox" class="chkbx" checked></td>
        <td>label 1</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="chkbx" checked></td>
        <td>label 1</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="chkbx" checked></td>
        <td>label 1</td>
    </tr>
</table>

我想我在这里错过了什么......

Answer 1

$('.chkbx').change(function(){
    var $this  = $(this), 
        color = ($this.is(':checked')) ? 'red' : 'green';
    $this.closest('tr').css('background-color', color);
});

演示：http://jsfiddle.net/6dR8C/1/

Answer 2

查看示例here。

问题是您的if正在检查与.chkbx:checked匹配的所有元素。如果选中任何复选框，则为true。您只需选中一个复选框this。

更新：样式初始化为here。

Answer 3

你可以这样做：

$(document).ready(function() {
    $(".chkbx").click(function() {
        if ($(this).is(":checked")) {
            $(this).closest("tr").css('background-color' ,'red');
        }
        else {
            $(this).closest("tr").css('background-color' ,'green');
        }
    });
});

Answer 4

这是一个有效的解决方案：http://jsfiddle.net/gDtLX/

基本上，您的if语句有点偏离，因为如果选中了任何复选框，它将始终是真的。然后，在加载时，您可以使用jQuery myFunc()在每个复选框上触发更改事件，而不是使用trigger()手动调用该函数。

Answer 5

我会使用CSS类，然后根据是否选中复选框添加/删除该类

$(function(){
  $("input.chkbx").click(function(){
    if($(this).is("checked")) {
      $(this).parent("tr").addClass('checkedRow');
    } else {
      $(this).parent("tr").removeClass('checkedRow');
    }
  });
});

通过使用类，可以通过样式表轻松修改颜色（或其他样式）。

Answer 6

据我所知，你想迭代你的复选框，如果复选框是红色，则表格为红色，否则为绿色。此外，您希望每次更改任何复选框时都这样做。

你应该使用jQuery的“each”方法迭代复选框。像这样：

function myFunc() {
  $('.chkbx').each(function () {
      var $this = $(this); 
      if ($this.is(':checked')) {
          $this.parents('tr').css("background-color","red");
      } else {
          $this.parents('tr').css("background-color","green");
      }
  });  
}

myFunc();

$(".chkbx").change(myFunc);

您可以在此处查看包含源代码的工作示例： http://jsbin.com/awexak/edit#preview

使用/ jQuery基于复选框更改样式

6 个答案: