jquery checkbox勾选/取消勾选只能操作一次的诡异问题
1.背景
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div>
<form>
你爱好的运动是?
<br />
<input type="checkbox" id="CheckedAll" />全选/全不选<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="send" value="提 交" />
</form>
</div>
</body>
<script type="text/javascript">
$("#CheckedAll").click(function () {
if ($(this).is(":checked")) {
$("[name=items]:checkbox").attr("checked", true);
} else {
$("[name=items]:checkbox").attr("checked", false);
}
});
</script>
</html>
2.现象
第一次执行,没问题,但第二次执行就有问题了,选择不了
3.解决办法
把attr()换成prop()
4.说明
jquery中attr方法和prop方法的区别
.prop()方法和.attr()方法,单从字面上很难区分。在汉语中properties和attributes都有表示“属性”的意思。
jQuery中,用于获取属性的方法,主要是基于prop方法的,我们经常使用的是attr方法,不过在attr方法中,有时候会出现一些问题的,这里就看下jquery的API中attr的介绍
attr
attr()的作用:获取匹配到的第一个元素的一个属性值,或者是为所有匹配的元素进行属性赋值。
在jQuery 1.6中,.attr()方法查询那些没有设置的属性,则会返回一个undefined。如果你要去恢复或者改变DOM状态值,类似checked,selected,disabled等表单元素的状态,最好使用.prop()方法。
prop
使用prop方法获取属性则统一返回true和false。
属性值 VS 状态值
在一些特殊的情况下,属性值和状态值的不同是有很大影响的。在jQuery 1.6之前的版本,.attr()方法在恢复一些属性时,有时会把状态值也考虑进去,这样的话,就会导致浏览器的兼容问题。在jQuery 1.6中,.prop()提供的方法可以避免恢复状态值,而.attr()方法会恢复状态值。
例如:selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked,和defaultSelected这些属性,就应该使用.prop()方法进行恢复属性值。在jQuery 1.6之前的版本,这些状态值都是可以通过.attr()获取的,虽然获取这些状态值并不是attr的工作范围。这些个状态值和属性是没有任何联系的,它们仅仅是一个状态。
5.总结
首选用法的概述
.prop()方法应该被用来处理boolean attributes/properties(比如:checked,selected,readonly和disabled)以及在html(比如:window.location)中不存在的properties。
其他所有的attributes(在html中你看到的那些)可以而且应该继续使用.attr()方法来进行操作。