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

PS。它确实添加和删除了已检查的属性，但在视觉上它不会改变。

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的一些案例。

Answer 2

$('.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()).attr('checked',false);
});

我希望这就是你要找的东西

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

2 个答案: