jquery - jquery复选框单击

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”时，它看起来像事件在检查集之前运行。

需要：在两个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”属性的标签标签，以获得对 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();

}