Question

有一张桌子

<table>
  <tr class="c1"><td><input type="checkbox" name="tableRow[]"></td>......</tr>
  <tr class="c2"><td><input type="checkbox" name="tableRow[]"></td>......</tr>
  <tr class="c1"><td><input type="checkbox" name="tableRow[]"></td>......</tr>
...
</table>

然后js是：

$('input:checkbox[name*=tableRow]').click(function(event) {

    var el = $(this);
    if (el.attr('checked')) {
        el.parents('tr').css("background-color", '#ffcccc');
    }
    else {
        el.parents('tr').css("background-color", 'inherit');
    }
    event.stopPropagation();
});

$('input:checkbox[name*=tableRow]').parents('tr').click(function() {
    var el = $(this).find('> td:eq(0) > :checkbox');
    el.click();
});

复选框以两种方式检查和取消选中，但是当我点击“tr”时，它会在检查集之前看起来像事件rans。

需要：在两个ckecks中然后设置css

Answer 1

更改为：

$('input:checkbox[name*=tableRow]').change(function(event) { ... });

而不是el.attr('checked')使用el.is(':checked');

请参阅此演示http://jsfiddle.net/S9L7C/

Answer 2

这是一个工作示例： jsFiddle

请注意，您应该使用带有'for'属性的label标签，以获得更加友好的W3C代码。

 $('input:checkbox[name*=tableRow]').click(function (event) {

            var el = $(this);
             test(el);    
     }); 

    $('input:checkbox[name*=tableRow]').parents('tr').click(function () {
        var el = $(this).find(':checkbox');
        el.attr('checked', !el.attr('checked'));
        test(el);
    });

function test(el){
       if (el.is(':checked')) {
                el.parents('tr').css("background-color", '#ffcccc');
            }
            else {
                el.parents('tr').css("background-color", 'inherit');
            }
            event.stopPropagation();

}

点击jquery复选框

2 个答案: