【jQuery】对于复选框操作的attr与prop

最新推荐文章于 2022-12-11 12:48:13 发布

yongh701

最新推荐文章于 2022-12-11 12:48:13 发布

阅读量2.4k

点赞数 1

分类专栏： jQuery 文章标签： jquery checkbox attr prop 选中

本文链接：https://blog.csdn.net/yongh701/article/details/46385801

版权

jQuery 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

这个是在jQuery1.6版本之后出现的鬼东西。受影响的主要有下拉列表select与复选框checkbox。众所周知，在jQuery中可以用attr()取出节点的属性，然而对于checkbox却不是这样了，比如我要取出其是否被选中的属性checked，attr("checked")去取没有选中的复选框是undefinded的，只能取出被选中复选框的属性。这个问题，导致我在一个条件判断中忙活了比较久的事件。查了一下发现，在jQuery1.6版本之后，你取复选框有没有被选中，要用prop

举个例子还说明这个问题，如下代码，设置两行完全一模一样的东西，两按钮对一复选框进行操作，一个行内文本，用来显示Jquery的属性，唯一不同的是一个用了attr属性，一个用了prop属性：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>attr与prop</title>
		<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		attr:
		<button id="selected1"/>选中复选框 </button>
		<button id="unselected1"/>不选中复选框 </button>
		<input type="checkbox" id="checkBox1" />
		<span id="tip1"></span><br/>
		prop:
		<button id="selected2"/>选中复选框 </button>
		<button id="unselected2"/>不选中复选框 </button>
		<input type="checkbox" id="checkBox2" />
		<span id="tip2"></span><br/>		
	</body>
</html>
<script type="text/javascript">
	$("#selected1").click(function(){
		$("#checkBox1").attr("checked",true);
		$("#tip1").html($("#checkBox1").attr("checked"));
	});
	$("#unselected1").click(function(){
		$("#checkBox1").attr("checked",false);
		$("#tip1").html($("#checkBox1").attr("checked"));
	});
	$("#selected2").click(function(){
		$("#checkBox2").prop("checked",true);
		$("#tip2").html($("#checkBox2").prop("checked"));
	});
	$("#unselected2").click(function(){
		$("#checkBox2").prop("checked",false);
		$("#tip2").html($("#checkBox2").prop("checked"));
	});
</script>

运行效果却得到如下所示，极其令人惊讶的是，虽然同样能够改变复选框的值，使用attr方法去操作的复选框的第一行，其值一直没有改变。无论选中还是没有选中一直是checked的状态，而第二行使用了prop，选中是true，没选中是没有选中的undefinded，这才能真正用于if条件的判断。使用attr取复选框是否被选中，放到if中，只会对头两次选择有效，之后就失效了。因此，以后再jQuery搞复选框，没什么事还是用prop。

jQuery你丫为何各个版本的代码会不同呢？为何不能像Javascript一样，能取就能改呢？

yongh701

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【jQuery】对于复选框操作的attr与prop

这个是在jQuery1.6版本之后出现的鬼东西。受影响的主要有下拉列表select与复选框checkbox。众所周知，在jQuery中可以用attr()取出节点的属性，然而对于checkbox却不是这样了，比如我要取出其是否被选中的属性checked，attr("checked")去取没有选中的复选框是undefinded的，只能取出被选中复选框的属性。这个问题，导致我在一个条件判断中忙活了比较久
复制链接

扫一扫