checkbox利用JQuer中 attr('checked', true)设置状态只有第一次有用

  在JQuery中可以使用attr()来访问对象的属性,但是在某些时候,比如访问input的disabled属性的时候,会有些问题。在有的浏览器中,只要写了disabled属性就可以,有的则要写:disabled="disabled"。所以JQuery提供了新的方法prop()来获取这些属性,使用prop()的时候,返回值是标准属性:true/false,不会回返“disabled”或者“”。那么,那些属性应该使用attr()访问,哪些应该用prop()访问呢?

第一个原则:只添加属性名称该属性就会生效的应该使用prop();

第二个原则:只存在true/false的属性应该使用prop()。

像如果是设置disabled或者checked这些属性,应该使用prop()方法,而不是使用attr()方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>复选框应用</title>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
		<style>
			.checkbox{
				border: 1px solid #A9A9A9;
				margin: 10px auto;
				padding: 10px 10px;
			}
		</style>
		<script>
			$(function(){
				//全选
				$("#CheckedAll").click(function(){
					//$("[name=items]:checkbox").attr('checked',true);//只有第一次生效
					$("[name=items]:checkbox").prop('checked',true);//只有第一次生效
				});
				//全不选
				$("#CheckedNo").click(function(){
					//$("[name=items]:checkbox").attr('checked',false);//只有第一次生效
					$("[name=items]:checkbox").prop('checked',false);
				});
				//反选
				$("#CheckedRev").click(function(){
					$("[name=items]:checkbox").each(function(){
						this.checked=!this.checked;
					})
				});
				//提交
				$("#send").click(function(){
					var str="你选中的是:\r\n";
					$("[name=items]:checked").each(function(){
						str+=$(this).val()+"\r\n";
					})
					alert(str);
				});
				//全选/全不选
				$("#CheckedAN").click(function(){
					$("[name=items]:checkbox").prop("checked",this.checked);
				})
				//当复选框取消某一个选项的选中状态是时,全选/全不选需要取消选中状态
				$("[name=items]:checkbox").click(function(){
					var tmp=$("[name=items]:checkbox");
					$("#CheckedAN").prop("checked",tmp.length==tmp.filter(":checked").length);
				})
			})
		</script>
	</head>
	<body>
	<form action="#" method="post" id="regForm">
		<fieldset>
			<legend>复选框应用</legend>
			<div class="checkbox">
				你爱好的运动是?
				<input type="checkbox" id="CheckedAN" value="全选/全不选"/>全选/全不选
				<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="提交" />
			</div>
		</fieldset>
	</form>
	</body>
</html>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值