不同版本的jquery的复选框checkbox的相关问题

浏览数：18 / 时间：2015年06月09日

在尝试写复选框时候遇到一个问题，调试了很久都没调试出来，极其郁闷：

IE10，Chrome,FF中，对于选中状态，第一次$(‘#checkbox‘).attr(‘checked‘,true)可以实现

但是当通过代码清除选中，下次再通过代码 $(‘#checkbox‘).attr(‘checked‘,true) 去选中时

虽然代码中有checked=‘checked‘,但是画面表现都没有打勾。

例如如下的代码：

<!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>
 <!--   引入jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
 <script type="text/javascript">
  $(function(){
     //全选
     $("#CheckedAll").click(function(){
         $(‘[name=items]:checkbox‘).attr(‘checked‘, true);
     });
     //全不选
     $("#CheckedNo").click(function(){
        $(‘[type=checkbox]:checkbox‘).attr(‘checked‘, false);
     });
  })

  </script>
</head>
<body>
<form method="post" action="">
   你爱好的运动是？
   <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="提　交"/> 
</form>
</body>
</html>

后来查了查资料，发现在jquery 1.8.x中的版本，我们对于checkbox的选中与不选中操作如下：

判断是否选中

$(‘#checkbox‘).prop(‘checked‘)

设置选中与不选中状态：

$(‘#checkbox‘).attr(‘checked‘,true)

$(‘#checkbox‘).attr(‘checked‘,false)

但此方法在jquery1.9.1及其以后的版本中，就会出现如上文所示的问题，

后来查找相关的资料，发现现在attr(‘checked‘,true)都换成prop(‘checked‘,true)

prop()获取匹配的元素的属性值。
这个方法是jquery1.6以后出来的，用来区别之前的.attr()方法.

区别最大的一点就是：布尔型的属性，1.6以后都是用.prop()方法就好了。
这个布尔型的属性，再解释一下，是属性值只有true|false的属性。
还有种情况就是只添加属性名，不需要写属性值的就可以生效的也同样使用.prop()方法。比如：checked、disable这样的，其实它们说到底还是属于布尔型的属性。
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();

参考：http://blog.sina.com.cn/s/blog_655388ed01017cnc.html

不同版本的jquery的复选框checkbox的相关问题,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

不同版本的jquery的复选框checkbox的相关问题