我的jquery复选框 全选/全不选/反选 功能为什么不正常啊
<html><headlang="en"><metacharset="UTF-8"><title>form3</title><scripttype="text/javas...
<html>
<head lang="en">
<meta charset="UTF-8">
<title>form3</title>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
</head>
<body>
<form>
你爱好的运动是:<br/>
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="排球" />排球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="button" id="checkAll" value="全选"/>
<input type="button" id="checkNo" value="全不选"/>
<input type="button" id="checkReverse" value="反选"/>
</form>
</body>
<script>
$('#checkAll').click(function(){
$(':checkbox').attr('checked',true);
});
$('#checkNo').click(function(){
$(':checkbox').removeAttr('checked');
});
$('#checkReverse').click(function(){
$(':checkbox').each(function(){
var flag=this.checked;
$(this).attr('checked',function(index,value){
return !value;
});
});
});
</script>
</html>
这是代码 我的全不选按钮完全正常 全选只能在页面刷新完使用一次 用了一次之后就再也不能用了 除非再度刷新页面 也就是说我点了一次全选能正常用 如果我去掉几个对勾 再度点击全选 就没反应了
同样 反选也是只能用一次
这是为什么啊 展开
<head lang="en">
<meta charset="UTF-8">
<title>form3</title>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
</head>
<body>
<form>
你爱好的运动是:<br/>
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="排球" />排球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="button" id="checkAll" value="全选"/>
<input type="button" id="checkNo" value="全不选"/>
<input type="button" id="checkReverse" value="反选"/>
</form>
</body>
<script>
$('#checkAll').click(function(){
$(':checkbox').attr('checked',true);
});
$('#checkNo').click(function(){
$(':checkbox').removeAttr('checked');
});
$('#checkReverse').click(function(){
$(':checkbox').each(function(){
var flag=this.checked;
$(this).attr('checked',function(index,value){
return !value;
});
});
});
</script>
</html>
这是代码 我的全不选按钮完全正常 全选只能在页面刷新完使用一次 用了一次之后就再也不能用了 除非再度刷新页面 也就是说我点了一次全选能正常用 如果我去掉几个对勾 再度点击全选 就没反应了
同样 反选也是只能用一次
这是为什么啊 展开
2个回答
展开全部
$('#checkAll').click(function(){
$(':checkbox').each(function(i, el){//最好这样。setAttribute有时候会有问题。
el.checked = true;
});
});
$('#checkNo').click(function(){
$(':checkbox').each(function(i, el){
el.checked = false;
});
});
$('#checkReverse').click(function(){
$(':checkbox').each(function(){
var flag=this.checked;
$(this).attr('checked',function(index,value){
return !value;
});
});
});
如果你直接
$(':checkbox').attr('checked',true);你会发现，其实你复选框上已经显示checked="checked"了。按道理是应该处于选中状态的。
但实际上。你再调用
$(':checkbox')[0].checked;//会返回false很奇怪吧。虽然从attr属性上看，确实是checked的。但是dom元素的直接属性上，却返回false。
jquery的attr调用的是DOM的setAttribute方法。也就是说，
$el.setAttribute('checked', true);和$el.checked = true;是有可能在浏览器上处理不一致的。
最常规的方式总之最正确的。如果遇到兼容性的问题。就尽量采用DHTML中最通用的方式。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
