jQuery checkbox bug（第一次能选中生效，第二次失效）

来源：互联网发布：windows nt4.0 编辑：程序博客网时间：2024/05/28 20:19

1.问题描述

想实现一个效果，当label被点击时，checkbox就切换checked的状态。代码如下

<div class="pillCheckbox">    <input type="checkbox" value="1">    <label for="pillCheckbox"></label>                      </div>

原js代码：

//.maskContent是外部div大框，上面html省略$('.maskContent').delegate('.pillCheckbox>label','click',function(){    $(this).toggleClass('checked');    if($(this).hasClass('checked')){       $(this).siblings('input').attr('checked','checked');    }else{       $(this).siblings('input').removeAttr('checked');    }});

当第一次点击label时，checkbox能正常切换，到第二次时就失效了。

2.查看官方文档

后来查看jQuery官方文档发现自1.6后改版了，attr不能这么用了，引述官方文档的一段话：

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

property和attribute相比来说，property是一种boolean attribute，即布尔值属性，只有两种状态，如checked，selected，readonly。取这些property时，应该用prop()。

为了比较prop()和attr()，下面列出一个表格。假设有这样一个元素<input type="checkbox" checked="checked" />，名为elem。

代码结果说明 elem.checked true (Boolean) 会跟着checkbox状态改变 $( elem ).prop( "checked" ) true (Boolean) 会跟着checkbox状态改变 elem.getAttribute( "checked" ) "checked" (String) 显示checkbox的初始值; 不会改变 $( elem ).attr( "checked" ) (1.6+) "checked" (String) 显示checkbox的初始值; 不会改变 $( elem ).attr( "checked" ) (pre-1.6) true (Boolean) 会跟着checkbox状态改变

继续引用官方文档的一段话：

the most important concept to remember about the checked attribute is that it does not correspond to the checked property. The attribute actually corresponds to the defaultChecked property and should be used only to set the initial value of the checkbox. The checked attribute value does not change with the state of the checkbox, while the checked property does.

checked attribute 不相当于checked property，而是相当于defaultChecked property，且只能用于设置checkbox的初始值。checked attribute不会跟着checkbox的状态变化，而 checked property才会。

演示实例：

<!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>prop demo</title>  <style>  p {    margin: 20px 0 0;  }  b {    color: blue;  }  </style>  <script src="https://code.jquery.com/jquery-1.10.2.js"></script></head><body><input id="check1" type="checkbox" checked="checked"><label for="check1">Check me</label><p></p><script>$( "input" ).change(function() {  var $input = $( this );  $( "p" ).html(    ".attr( \"checked\" ): <b>" + $input.attr( "checked" ) + "</b><br>" +    ".prop( \"checked\" ): <b>" + $input.prop( "checked" ) + "</b><br>" +    ".is( \":checked\" ): <b>" + $input.is( ":checked" ) + "</b>" );}).change();</script></body></html>

3.问题解决

改成prop即可正确运行。

$('.maskContent').delegate('.pillCheckbox>label','click',function(){    $(this).toggleClass('checked');    if($(this).hasClass('checked')){      $(this).siblings('input').prop('checked',true);    }else{      $(this).siblings('input').prop('checked',false);    }});

参考文献：.prop() | jQuery官方文档

阅读全文

0 0