html js全选与反选checkbox代码

2020-07-04 网络
html实现js全选与反选checkbox代码，源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html js全选与反选checkbox代码</title>
<script type="text/javascript">
//获取checkbox按钮组
var allpro = document.getElementsByName("c1");
//全选方法
function change(){
	//获取全选按钮
	var all = document.getElementById("all");
	//全选按钮被选中时，遍历所有按钮
	if (all.checked) {
		for (var i = 0; i < allpro.length; i++) {
			if (allpro[i].type=="checkbox") {
				allpro[i].checked=true;
			}
		}
	//全选按钮未被选中时
	}else{
		for(var i = 0; i < allpro.length; i++) {
			if (allpro[i].type=="checkbox") {
				allpro[i].checked=false;
			}
		}
	}
}
//反选的方法
function revs(){
	//获得反选按钮
	var reverse = document.getElementById("revcheck");
	//反选按钮被选中时，遍历所有按钮
	if (reverse.checked){
		for(var i = 0; i < allpro.length; i++){
			if (allpro[i].type=="checkbox"&&allpro[i].checked==true) {
				allpro[i].checked= false;
			}else if (allpro[i].type=="checkbox"&&allpro[i].checked==false){
				allpro[i].checked= true;
			}
		}
		//反选按钮未被选中时
	}else{
		for(var i = 0; i < allpro.length; i++){
			if (allpro[i].type=="checkbox"&&allpro[i].checked==true) {
			allpro[i].checked= false;
			}else if (allpro[i].type=="checkbox"&&allpro[i].checked==false){
				allpro[i].checked= true;
			}
		}
	}
}
</script>
</head>
<body>
<table>
	<tr><td>
	<input type="checkbox" name="c0" id="all" value="全选" onclick="change()">全选
	<input type="checkbox" name="r0" id="revcheck" value="反选" onclick="revs()">反选
	</td></tr>
	<tr><td><input type="checkbox" name="c1">篮球</td></tr>
	<tr><td><input type="checkbox" name="c1">足球</td></tr>
	<tr><td><input type="checkbox" name="c1">羽毛球</td></tr>
	<tr><td><input type="checkbox" name="c1">兵乓球</td></tr>
</table>
</body>
</html>