jquery 中prop的使用以及一些要注意的问题

最新推荐文章于 2023-06-26 22:38:08 发布

weixin_34192732

最新推荐文章于 2023-06-26 22:38:08 发布

阅读量227

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/tearlight/blog/193451

版权

2019独角兽企业重金招聘Python工程师标准>>>

近有网友提出jquery做全选和取消全选这些操作时，只能执行一遍，后面追查下去，发现了问题的根源，发现用jquery中的removeProp对checked操作是会完全移除了元素的属性，以至于使用removeProp后再使用prop设置属性就没有效果了？？

于是查找到了官网，终于发现了

Do not use this method to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead.

这是jquery中的说明 http://api.jquery.com/removeProp/

于是html是可以这样的

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>prop的使用</title>
</head>
<body>
<label><input type="checkbox" name="" id="checkAllWaitlist" />全选</label>
<br />
<input type="checkbox" name="" id="" class="waitSoldOrder" />
<input type="checkbox" name="" id="" class="waitSoldOrder" />
<input type="checkbox" name="" id="" class="waitSoldOrder" />
<input type="checkbox" name="" id="" class="waitSoldOrder" />
<input type="checkbox" name="" id="" class="waitSoldOrder" />
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(function(){
		$('#checkAllWaitlist').click(function(){
			$('.waitSoldOrder').prop('checked',this.checked);
			//取消选中时不能使用 removeProp ,这样会在第二次全选的时候发现下面的不能选中，因为使用removeProp会把该属性从元素中移除 ，应该是使用prop 进行修改其状态
			//下面是jquery官网的说明   http://api.jquery.com/removeProp/
			//Do not use this method to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead.
		});
	});
</script>
</body>
</html>

有兴趣的可以测试一下。

转载于:https://my.oschina.net/tearlight/blog/193451