jquery中checkbox全选失效的解决方法

前端技术 2023/09/03 JavaScript

如果你使用jQuery 1.6 ，代码if ( $(elem).attr(“checked”) )，将获得一个属性(attribute) ，它不改变该复选框被选中和选中。它只是用来存储默认或选中属性的初始值。为了保持向后兼容，.attr() 方法从 jQuery 1.6.1+ 开始除了返回属性值外，还会更新 property 属性，因此 boolean attribute（布尔属性）不需要通过 .prop() 来改变其值。推荐使用上述方法之一，来取得 checked 的值。

使用jQuery的attr方法获取和设置复选框的”checked”属性，发现第一次全选/取消全选有效，之后就无效了，但查看html源文件，复选框属性确实已经被更新了，就是页面中没有更新，正确的方法如下：

<script type=\"text/javascript\" src=\"http://code.jquery.com/jquery-1.11.1.min.js\"></script><script type=\"text/javascript\">// <![CDATA[
$(function(){
$(\'.ckAll\').click(function(){
$(\".box-items\").each(function(){
  $(this).prop(\"checked\",!!$(\".box-all\").prop(\"checked\"));
});
});
});
// ]]></script>
<div><label class=\"ckAll\"><input class=\"box-all\" type=\"checkbox\" /><span>全选</span></label>
<input class=\"box-items\" type=\"checkbox\" />
<input class=\"box-items\" type=\"checkbox\" />
<input class=\"box-items\" type=\"checkbox\" />
<input class=\"box-items\" type=\"checkbox\" />
<input class=\"box-items\" type=\"checkbox\" />
</div>

本文地址：https://www.stayed.cn/item/6324

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案