checkbox利用JQuer中 attr('checked', true)设置状态只有第一次有用
2016-12-18 11:42
579 查看
在JQuery中可以使用attr()来访问对象的属性,但是在某些时候,比如访问input的disabled属性的时候,会有些问题。在有的浏览器中,只要写了disabled属性就可以,有的则要写:disabled="disabled"。所以JQuery提供了新的方法prop()来获取这些属性,使用prop()的时候,返回值是标准属性:true/false,不会回返“disabled”或者“”。那么,那些属性应该使用attr()访问,哪些应该用prop()访问呢?
第一个原则:只添加属性名称该属性就会生效的应该使用prop();
第二个原则:只存在true/false的属性应该使用prop()。
像如果是设置disabled或者checked这些属性,应该使用prop()方法,而不是使用attr()方法。
第一个原则:只添加属性名称该属性就会生效的应该使用prop();
第二个原则:只存在true/false的属性应该使用prop()。
像如果是设置disabled或者checked这些属性,应该使用prop()方法,而不是使用attr()方法。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>复选框应用</title> <script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script> <style> .checkbox{ border: 1px solid #A9A9A9; margin: 10px auto; padding: 10px 10px; } </style> <script> $(function(){ //全选 $("#CheckedAll").click(function(){ //$("[name=items]:checkbox").attr('checked',true);//只有第一次生效 $("[name=items]:checkbox").prop('checked',true);//只有第一次生效 }); //全不选 $("#CheckedNo").click(function(){ //$("[name=items]:checkbox").attr('checked',false);//只有第一次生效 $("[name=items]:checkbox").prop('checked',false); }); //反选 $("#CheckedRev").click(function(){ $("[name=items]:checkbox").each(function(){ this.checked=!this.checked; }) }); //提交 $("#send").click(function(){ var str="你选中的是:\r\n"; $("[name=items]:checked").each(function(){ str+=$(this).val()+"\r\n"; }) alert(str); }); //全选/全不选 $("#CheckedAN").click(function(){ $("[name=items]:checkbox").prop("checked",this.checked); }) //当复选框取消某一个选项的选中状态是时,全选/全不选需要取消选中状态 $("[name=items]:checkbox").click(function(){ var tmp=$("[name=items]:checkbox"); $("#CheckedAN").prop("checked",tmp.length==tmp.filter(":checked").length); }) }) </script> </head> <body> <form action="#" method="post" id="regForm"> <fieldset> <legend>复选框应用</legend> <div class="checkbox"> 你爱好的运动是? <input type="checkbox" id="CheckedAN" value="全选/全不选"/>全选/全不选 <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="乒乓球" />乒乓球 <br /> <input type="button" id="CheckedAll" value="全选"/> <input type="button" id="CheckedNo" value="全不选"/> <input type="button" id="CheckedRev" value="反选" /> <input type="button" id="send" value="提交" /> </div> </fieldset> </form> </body> </html>
相关文章推荐
- Codeforces Round #385 (Div. 2) -- C. Hongcow Builds A Nation(并查集)
- 4-进一步结合ui文件编写helloworld
- C. Hongcow Builds A Nation
- /etc/shadow文件详解
- Scala中break与continue的用法
- C. Hongcow Builds A Nation 并查集
- easyUI的dateBox控制时间格式
- poj 3368 Frequent values--RMQ
- Druid (大数据实时统计分析数据存储)
- Android 更新UI的两种方法——handler和runOnUiThread()
- UIImage高性能圆角绘制,压缩,截屏,帧图片获取,修改原有image底色等各种功能持续更新
- Leetcode 304. Range Sum Query 2D - Immutable
- UIBarButtonItem设定图片
- vue全家桶
- HDU 1159 Common Subsequence 公共子序列 简单DP
- Hibernate SQLQuery原生sql查询
- vue脚手架vue-cli
- Scrapy源码分析(四):请求Request
- Java关键字系列 — String、StringBuffer、StringBuilder的区别和使用
- ubuntu grub.cfg 丢失 进入 grub rescue>