利用Jquery的prop制作复选框全选和取消功能
作者：Davidszhou 来源: 时间:2016-08-26 11:05:49 点击： 利用Jquery的prop制作复选框全选和取消功能
jquery增加和删除元素属性有：attr与prop
经百度attr与prop的使用环境：
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
attr与prop的返回值如下：
$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true
如果上面使用attr方法，则会出现：
$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"
了解之后，我们说一下思路：
1、当点击全选的复选框，子选项全部为选中，取消选中全选复选框，子选项全部取消
2、给全选复选框一个change事件，之后判断全选复选框是否为选中，根据全选复选框的true与false属性判断是否全选与全取消：
代码如下（全部）：
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>一键全选功能</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <body> <script type="text/javascript"> $(document).ready(function(e) { $("[name='quanxuan']").change(function(){ if($("[name='quanxuan']").prop("checked")==true){ $(".xx").prop("checked",true) }else{ $(".xx").prop("checked",false) } }) }); </script> <form action="" method="get"> <p> <input name="quanxuan" type="checkbox" value="" />全选<br /> <label> <input type="checkbox" name="xx1[]" value="复选框" class="xx" /> 选项1 </label> <br /> <label> <input type="checkbox" name="xx2[]" value="复选框" class="xx" /> 选项2 </label> <br /> </p> </form> </body> </html> |
来自Davids zhou博客原创文章请尊重作者：http://www.zongk.com/zongk/75.html转载请标注此链接
文章推荐
- 七日热点
- 热力推荐
- TAGS 列表
- 网站统计
- 文章总数：138
- 今天发布：0
- 软件资源数：20
- 友情连接：()
Davids zhou | 站点地图 | | | 皖ICP备14017762号 如有侵犯您权利点击上面QQ -Powered By 帝国CMS -davids.zhou#qq.com(#换@)
Davidszhou个人博客主要记录在网站建设、SEO优化、python开发、PHP开发中遇到问题记录保存，作为他人参考学习教程
