代码在jQuery 2.1.4中失败，但在旧版本中运行良好

Question

我注意到我的代码在jQuery 2.1.4中不起作用。但在jquery 1.4.3中工作。我已经做了一个代码，通过检查主复选框来检查表中的所有复选框。该代码适用于前2次点击，但不能从第三次点击中运行。 当我使用jquery 1.4.3时，代码正常工作。 jQuery代码是 -

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#mainCheckBox").click(function() { 
      if ($(this).is(":checked")) { 
       $("#pageTbody").find('input[type="checkbox"]').each(function() { 
        $(this).attr("checked", true); 
       }); 
      } 
      else { 
       $("#pageTbody").find('input[type="checkbox"]').each(function() { 
        $(this).attr("checked", false); 
       }); 
      } 
     }); 
    }); 
</script> 

有人能给出解决方案失败的原因在最新的jQuery版本？

Answer 1

您需要使用.prop()，而不是.attr()

在jQuery 1.6中，.prop()方法提供了一种明确检索属性值，而.attr()检索属性。

$(this).prop("checked", true/false); 

现有代码可以被优化为

$(document).ready(function() { 
    $("#mainCheckBox").change(function() { 
     $("#pageTbody input[type='checkbox']").prop("checked", this.checked); 
    }); 
}); 

1. 没有必要使用.each()
2. 使用change事件而不是click

Answer 2

checked是一个属性和不是一个属性，所以你将不得不为了现在使用.prop得到它的权利：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#mainCheckBox").click(function() { 
      if ($(this).is(":checked")) { 
       $("#pageTbody").find('input[type="checkbox"]').each(function() { 
        $(this).prop("checked", true); 
       }); 
      } 
      else { 
       $("#pageTbody").find('input[type="checkbox"]').each(function() { 
        $(this).prop("checked", false); 
       }); 
      } 
     }); 
    }); 
</script> 

Answer 3

用这样的方式：

$(this).prop("checked", true);