用js实现chexbox的全选和反选

最新推荐文章于 2023-08-31 21:11:30 发布

qizidehaijiao

最新推荐文章于 2023-08-31 21:11:30 发布

阅读量803

点赞数

文章标签： js

本文链接：https://blog.csdn.net/qizidehaijiao/article/details/42742445

版权

<!DOCTYPE HTML>
<html>
<head>
<title>全选和反选</title>
<style>
</style>
<script>
window.οnlοad=function(){
	var selectall=document.getElementById('selectall');
	var notselectall = document.getElementById("notselectall");
	var betray = document.getElementById("betray");
	var input = document.getElementById("div1").getElementsByTagName("input");
	selectall.οnclick=function ()		//匿名函数
	{
		for(var i=0;i<input.length;i++){
			input[i].checked=true;
		}
	}
	notselectall.οnclick=function(){
		for(var i=0;i<input.length;i++){
			input[i].checked=false;
		}
	}
	betray.οnclick=function(){
		for(var i=0;i<input.length;i++){
			if(input[i].checked==false){
				input[i].checked = true;
			}else{
				input[i].checked= false;
			}
		}
	}
}
</script>
</head>

<body>
	<input type="button" value="全选" id="selectall"></input>
	<input type="button" value="反选" id="betray" ></input>
	<input type="button" value="不选" id="notselectall"></input><br>
	<div id="div1">
		<input type="checkbox"></input><br/>
		<input type="checkbox"></input><br/>
		<input type="checkbox"></input><br/>
		<input type="checkbox"></input><br/>
		<input type="checkbox"></input><br/>
		<input type="checkbox"></input><br/>
		<input type="checkbox"></input><br/>
		<input type="checkbox"></input><br/>
		<input type="checkbox"></input><br/>
		<input type="checkbox"></input><br/>
	<div>
</body>
</html>