javascript - jQuery 检查所有复选框只工作一次

Question

为什么这个功能在 Chrome 上第二次不起作用？

$('.main').on('change','input[name="select_all"]',function(){
   if($(this).is(':checked')){
      $('input[type="checkbox"]',$(this).parent().parent().parent()).attr('checked',true);
   }else{
      $('input[type="checkbox"]',$(this).parent().parent().parent()).removeAttr('checked');
});

第一次点击它检查所有，第二次它取消所有...但第三次什么都不做...

jsfiddle

附言。它确实添加和删除选中的属性，但在视觉上并没有改变。

Chrome 31.0.1650.57 m

Answer 1

使用prop代替attr:

$('.main').on('change','input[name="select_all"]',function(){
    if($(this).is(':checked')){
        $('input[type="checkbox"]',$(this).parent().parent().parent()).prop('checked',true);
    }else{
        $('input[type="checkbox"]',$(this).parent().parent().parent()).prop('checked', false);
    }
});

jQuery documentation解释差异并列出一些您应该使用 prop 的情况。