【Jqurey】关于复选框全选与反选的问题 ： 配置报错
<html xmlns="http://www.w3.org/1999/xhtml"> <head id="head" runat="server"> <title></title> <script src="jquery-1.9.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("[name='cbk']").bind("click", function() { $("[name='cbx']").attr("checked", this.checked); }); }); </script>
</head> <body> <input type="checkbox" name="cbk" /><br /> <input type="checkbox" name="cbx" /><br /> <input type="checkbox" name="cbx" /><br /> <input type="checkbox" name="cbx" /><br /> <input type="checkbox" name="cbx" /><br /> <input type="checkbox" name="cbx" /><br /> <input type="checkbox" name="cbx" /><br /> <input type="checkbox" name="cbx" /><br /> <input type="checkbox" name="cbx" /><br /> <input type="checkbox" name="cbx" /><br /> <input type="checkbox" name="cbx" /><br /> </body> </html>
这是我自己写的全选与反选，当第一次选择的时候是有效的，第二次选择之后就无效了，我不明白为什么。我用谷歌浏览器查看了代码，代码显示是正常的。请高手解答原因，不要重新给我写方法了，方法我自己写了好多种，只是这个有问题，我只是需要原因.....请大神们不吝赐教一下，灰常感谢
写回答
-
楼主，以下是我的代码，我反复测试了，可以的。。。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="jquery-1.8.2.js"></script> <script type="text/javascript"> $(function() { $("[name='cbk']").bind("click", function() { $("[name='cbx']").attr("checked", this.checked); }); }); </script> </head> <body> <h4>Demo</h4> <input type="checkbox" name="cbk" id="quanxuan"/><label for="quanxuan">点击进行全选</lable><br /> <hr> <input type="checkbox" name="cbx" /><br /> <input type="checkbox" name="cbx" /><br /> <input type="checkbox" name="cbx" /><br /> <input type="checkbox" name="cbx" /><br /> <input type="checkbox" name="cbx" /><br /> <input type="checkbox" name="cbx" /><br /> <input type="checkbox" name="cbx" /><br /> <input type="checkbox" name="cbx" /><br /> <input type="checkbox" name="cbx" /><br /> <input type="checkbox" name="cbx" /><br /> </body> </html>######回复 @花开自在 : 非常感谢，确实是jqurey版本的问题，我刚换了1.8.2的 是正常的，这问题有点坑....######回复 @寂工 : 额，是不是jquery版本的问题？我听说jquery哪个版本以后就不再支持IE的那个版本了。。。######回复 @花开自在 : 我也观察到了，但是我用了你的头 还是不可以，有点不理解了。。。。######回复 @寂工 : 我都测了一遍。。。IE7-10，360，chrome。。。我们文件头有点不同。。。######请问，您是什么浏览器，我这边IE9，360，还有谷歌浏览器都不可以######引用来自“花开自在”的答案
楼主，以下是我的代码，我反复测试了，可以的。。。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="jquery-1.8.2.js"></script> <script type="text/javascript"> $(function() { $("[name='cbk']").bind("click", function() { $("[name='cbx']").attr("checked", this.checked); }); }); </script> </head> <body> <h4>Demo</h4> <input type="checkbox" name="cbk" id="quanxuan"/><label for="quanxuan">点击进行全选</lable><br /> <hr> <input type="checkbox" name="cbx" /><br /> <input type="checkbox" name="cbx" /><br /> <input type="checkbox" name="cbx" /><br /> <input type="checkbox" name="cbx" /><br /> <input type="checkbox" name="cbx" /><br /> <input type="checkbox" name="cbx" /><br /> <input type="checkbox" name="cbx" /><br /> <input type="checkbox" name="cbx" /><br /> <input type="checkbox" name="cbx" /><br /> <input type="checkbox" name="cbx" /><br /> </body> </html>非常感谢，是版本的问题 ######
###### 推荐用prop方法代替attr方法。
$("[name='cbx']").prop("checked", $(this).prop("checked"));######是滴，我和朋友讨论了一下，他也这么说。我研究了一下prop的方法，发现Jqurey现在为了区分attr和prop对attr做了部分修改。2020-06-04 13:26:29赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
