【Jqurey】关于复选框全选与反选的问题

寂工 发布于 2013/04/18 14:11
阅读 338
收藏 0

<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>

 

 

 

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

加载中
0
不是小白
不是小白

楼主,以下是我的代码,我反复测试了,可以的。。。

<!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,还有谷歌浏览器都不可以
0
寂工
寂工

引用来自“花开自在”的答案

楼主,以下是我的代码,我反复测试了,可以的。。。

<!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>

非常感谢,是版本的问题
0
戴威
戴威

推荐用prop方法代替attr方法。

$("[name='cbx']").prop("checked", $(this).prop("checked"));

寂工
寂工
是滴,我和朋友讨论了一下,他也这么说。我研究了一下prop的方法,发现Jqurey现在为了区分attr和prop对attr做了部分修改。
返回顶部
顶部