开发者社区> 问答> 正文

【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>
 
 
 
这是我自己写的全选与反选,当第一次选择的时候是有效的,第二次选择之后就无效了,我不明白为什么。我用谷歌浏览器查看了代码,代码显示是正常的。请高手解答原因,不要重新给我写方法了,方法我自己写了好多种,只是这个有问题,我只是需要原因.....请大神们不吝赐教一下,灰常感谢

展开
收起
kun坤 2020-06-03 15:01:26 418 0
1 条回答
写回答
取消 提交回答
  • 楼主,以下是我的代码,我反复测试了,可以的。。。

    <!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
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载