全选，反选及jQuery1.9.1针对checkbox的调整

最新推荐文章于 2025-09-03 11:20:21 发布

转载最新推荐文章于 2025-09-03 11:20:21 发布 · 93 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/lantianbaiyun/blog/392587

文章标签：

#python #javascript #ViewUI

本文介绍如何使用原生JavaScript实现网页元素全选、反选及不选功能，包括代码实现及注意事项。

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

1.原生js实现全选、反选等功能

<!DOCTYPE html>
<html>
<head>
	<title>全选</title>
</head>
<body>
<input id="btn1" type="button" value="全选"><br />
<input id="btn2" type="button" value="不选"><br />
<input id="btn3" type="button" value="反选"><br />
<div id="for_check">
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
</div>
<script type="text/javascript">
	var mybtn1 = document.getElementById('btn1');
	var mybtn2 = document.getElementById('btn2');
	var mybtn3 = document.getElementById('btn3');
	var mydiv = document.getElementById('for_check');
	var mycheck = mydiv.getElementsByTagName('input');

	mybtn1.onclick=function(){
		for(var i = 0; i < mycheck.length; i++){
			mycheck[i].checked=true;
		}
	};

	mybtn2.onclick=function(){
		for(var i = 0; i < mycheck.length; i++){
			mycheck[i].checked=false;
		}
	};

	mybtn3.onclick=function(){
		for(var i = 0; i < mycheck.length; i++){
			if(mycheck[i].checked==true) {
				mycheck[i].checked=false;
			}else{
				mycheck[i].checked=true;
			};
		}
	};
</script>
</body>
</html>

2.使用jquery选择要注意版本问题，对于1.9以上的版本要注意

$(".ppp").attr("checked",true);
换成：
$(".ppp").prop("checked",true);
如果不换先设置flase再设置ture，设置的ture无效

转载于:https://my.oschina.net/lantianbaiyun/blog/392587