通过attr 动态设置CheckBox的checked属性,会出现第二次设置cheked属性不起作用的情况

               

转载自:http://blog.csdn.net/xiaouncle/article/details/52001117

出现该问题时就要了解一下jquery利用attr、prop方法的区别

在jquery中应该使用prop方法来获取和设置checked属性,不应该使用attr,需要的朋友可以参考下。

1、prop方法获取、设置checked属性

<input type="checkbox" name="checkboxMain" onclick="CheckAll(this);" />function CheckAll(obj) {   //获取checked属性   if ($(obj).prop("checked")) {      //设置checked属性      $("input[name='checkboxall']").prop("checked", true);   } else {      //设置checked属性      $("input[name='checkboxall']").prop("checked",false);                                   }} 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

当input控件checkbox设置了checked属性时,无论checked=”“或 
checked=”checked”,$(obj).prop(“checked”)的结果都是true; 
当input控件checkbox没设置checked属性时,$(obj).prop(“checked”)的结果是false。 
设置$(“input[name=’checkboxall’]”).prop(“checked”, true)时,checkbox会被选中; 
设置$(“input[name=’checkboxall’]”).prop(“checked”, false)时,checkbox不会被选中;

2、attr方法获取、设置checked属性

<input type="checkbox" id="selectAll" onclick="checkAll()" >全选  
如果当前input中初始化未定义checked属性,则不管当前是否选中,$(“#selectAll”).attr(“checked”)都会返回undefined; 
<input type="checkbox" id="selectAll" checked="" onclick="checkAll()" >全选  
<input type="checkbox" id="selectAll" checked="checked"  
onclick="checkAll()" >
全选 
如果当前input中初始化定义了checked属性,无论checked=”“或 
checked=”checked”,当前checkbox都处于选中状态, 
$(“#selectAll”).attr(“checked”)都会返回”checked”;

3、总结

在jquery中应该使用prop方法来获取和设置checked属性,不应该使用attr。 
这篇文章写得较早,之后我又写了一篇文章来解释jQuery中prop和attr的区别,如果大家有需要的话请移步 
http://blog.csdn.net/xiaouncle/article/details/53959496

4、jquery版本原因

jquery-1.4.1.min.js、jquery-1.4.2.min.js可以用attr方法正确地获取或设置checkbox的checked属性,但是高版本例如:1.10.2.min.js就不能用attr方法正确地获取或设置checkbox的checked属性,在此声明:其他版本没有测试。 
jquery-1.4.1.min.js文件下载地址:http://download.csdn.net/detail/xiaouncle/9585180 
jquery-1.4.2.min.js文件下载地址:http://download.csdn.net/detail/xiaouncle/9585205

           

再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!希望你也加入到我们人工智能的队伍中来!http://www.captainbed.net

这里写图片描述

猜你喜欢

转载自blog.csdn.net/qq_43746825/article/details/84317467
今日推荐