码迷,mamicode.com
首页 > Web开发 > 详细

jquery checkbox 全选 不要用attr要用 prop

时间:2014-11-23 18:43:33      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   ar   color   使用   sp   java   

最近的项目要用到checkbox全选功能,然而使用 attr时总是出现第二次点击时checkbox不变化。后来搜索后,发现在jquery1.6以后已经不用attr处理布尔值的属性了。

 

查看文档发现

 

properties就是浏览器用来记录当前值的东西。正常情况下,properties反映它们相应的attributes(如果存在的话)。但这并不是boolean attriubutes的情况。当用户点击一个checkbox元素或选中一个select元素的一个option时,boolean properties保持最新。但相应的boolean attributes是不一样的,正如上面所述,它们仅被浏览器用来保存初始值。

 

 

	$(‘#task_endless_table‘).on(‘click‘, ‘#checkAll‘,
			 function() {
               // $(‘input[name="subBox2"]‘).attr("checked",this.checked);
               $(‘input[name="subBox"]‘).prop(‘checked‘, this.checked);
            });
		

 

 另外:jquery的on函数又是一个新功能,对于我的项目,on功能可以帮助我解决“刷新后重新绑定的问题”

 

下面是 jquery checkbox 全选demo

<!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 runat="server">
<title>jQuery实现CheckBox全选、全不选</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>    <script type="text/javascript">
        $(function() {
           $("#checkAll").click(function() {
                $(‘input[name="subBox"]‘).prop(‘checked‘, this.checked);
            });
			
           
        });
    </script>
 
</head>
<body>
    <div>
        <input id="checkAll" type="checkbox" />全选
        <input name="subBox" type="checkbox" />项1
        <input name="subBox" type="checkbox" />项2
        <input name="subBox" type="checkbox" />项3
        <input name="subBox" type="checkbox" />项4
    </div>
</body>
</html>

 

 

 

 


 

 
 

jquery checkbox 全选 不要用attr要用 prop

标签:style   blog   http   io   ar   color   使用   sp   java   

原文地址:http://www.cnblogs.com/springran/p/4117130.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!