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

這裏是一個工作示例： jsFiddle

請注意，你應該爲了得到一個更友好的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(); 

} 

Answer 2

改成這樣：

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

，取而代之的el.attr('checked')使用el.is(':checked');

看到這個演示http://jsfiddle.net/S9L7C/