前段时间在用jQuery1.9版本中操作复选框总是出现选不中的情况,经过查询资料总结如下:
在jquery 1.8.及以下的版本,我们对于checkbox的选中与不选中操作如下:(一般用属性attr()操作)
<!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>
<title></title>
<!--<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>-->
<script src="js/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//全选
$("#CheckedAll").click(function () {
$('[name=items]:checkbox').attr('checked', true);
});
//全不选
$("#CheckedNo").click(function () {
$('[name=items]:checkbox').attr('checked', false);
});
//反选
$("#CheckdRev").click(function () {
$('[name=items]:checkbox').each(function () {
//此处用Jquery写法
//$(this).attr("checked", !$(this).attr("checked"));
//直接使用JS原生代码,简单实用
this.checked = !this.checked;
});
});
$("#CheckedAllNO").click(function () {
$("[name=items]:checkbox").attr("checked", this.checked);
});
//提交
$("#send").click(function () {
var str = "你选中的是:\r\n";
$('[name=items]:checkbox:checked').each(function () {
str += $(this).val() + "\r\n";
})
alert(str);
});
});
</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 />
<br />
<input type="checkbox" id="CheckedAllNO" />全选/全不选<br />
<input type="button" id="CheckedAll" value="全 选" />
<input type="button" id="CheckedNo" value="全不选" />
<input type="button" id="CheckdRev" value="反 选" />
<input type="button" id="send" value="提 交" />
</form>
</body>
</html>
在jQuery1.9以上用attr()在第一次可以选中以及全不选,第二次操作就会不出现效果应该将attr()改成 prop()
<head>
<title></title>
<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
<!--<script src="js/jquery-1.3.1.js" type="text/javascript"></script>-->
<script type="text/javascript">
$(function () {
//全选
$("#CheckedAll").click(function () {
$('[name=items]:checkbox').prop('checked', true);
});
//全不选
$("#CheckedNo").click(function () {
$('[type=checkbox]:checkbox').prop('checked', false);
});
//反选
$("#CheckdRev").click(function () {
$('[name=items]:checkbox').each(function () {
//此处用JQ写法。
//$(this).attr("checked", !$(this).attr("checked"));
//直接使用JS原生代码,简单实用
this.checked = !this.checked;
});
});
$("#CheckedAllNO").click(function () {
$("[name=items]:checkbox").prop("checked", this.checked);
});
//提交
$("#send").click(function () {
var str = "你选中的是:\r\n";
$('[name=items]:checkbox:checked').each(function () {
str += $(this).val() + "\r\n";
})
alert(str);
});
});
</script>
</head>
那么,什么时候使用attr,什么时候使用prop??
1.添加属性名称该属性就会生效应该使用prop.
2.是有true,false两个属性使用prop.
3.其他则使用attr
项目中jquery升级的时候大家要注意这点!
以下是官方建议attr(),prop()的使用:
Attribute/Property | .attr() | .prop() |
---|---|---|
accesskey | √ | |
align | √ | |
async | √ | √ |
autofocus | √ | √ |
checked | √ | √ |
class | √ | |
contenteditable | √ | |
draggable | √ | |
href | √ | |
id | √ | |
label | √ | |
location ( i.e. window.location ) | √ | √ |
multiple | √ | √ |
readOnly | √ | √ |
rel | √ | |
selected | √ | √ |
src | √ | |
tabindex | √ | |
title | √ | |
type | √ | |
width ( if needed over .width() ) |