现在位置首页 / 项目实战 /正文

Jquery对checkbox的其他几个操作

作者: IT小兵 | 2014年3月8日| 热度:℃ | 评论: |参与:

jquery 对checkbox的操作主要有:

1. 全选  

2. 取消全选  

3. 选中所有奇数  

4. 反选  

5. 获得选中的所有值  

代码如下:

$("document").ready(function(){  
$("#btn1").click(function(){  
$("[name='checkbox']").attr("checked",'true');//全选  
})  
$("#btn2").click(function(){  
$("[name='checkbox']").removeAttr("checked");//取消全选  
})  
$("#btn3").click(function(){  
$("[name='checkbox']:even").attr("checked",'true');//选中所有奇数  
})  
$("#btn4").click(function(){  
$("[name='checkbox']").each(function(){//反选  
if($(this).attr("checked")){  
$(this).removeAttr("checked");  
}  
else{  
$(this).attr("checked",'true');  
}  
})  
})  
$("#btn5").click(function(){//输出选中的值  
var str="";  
$("[name='checkbox'][checked]").each(function(){  
str+=$(this).val()+"/r/n";  
//alert($(this).val());  
})  
alert(str);  
})  
})

1

2

3

4

   

$('input[type=checkbox]').attr('checked','checked');//全选,设置属性

$('input[type=checkbox]').attr('checked',true);//全选,设置属性,通过true布尔值形式

$('input[type=checkbox]').attr('checked',false);//不选择,布尔值形式

$('input[type=checkbox]').removeAttr('checked','checked');//不选选,删除属性

   

但是测试结果发现,屡试不爽啊,选择一次全选,再调用一次反选,再去调用全选就没效果了。
难道是 removeAttr 的原因?还是‘跑客教授’使用过新的 jQuery 1.9.1版本。(还是说我要使用原生的javascript代码来完成这项工作呢?)

这些都不是理由,理由应该 是自己没有用好。不可能这么牛比的框架这么简单的功能都不能实现(也不要轻意怀疑浏览器的问题)

最终解决方案

还是到官网,搜索了’checkbox’,找到一文章,仔细查看了吓,有一个类似的操作是

 

   

$('obj').attr('checked',true);

$('obj').prop('checked',true);

$('obj').attr('checked',false);

$('obj').prop('checked',false);

   

好了,擦亮你的眼睛,没错最后用的是 prop方法操作一切就OK啦。



prop

转发注明:IT分享

点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询