JavaScript：全选、不选和反选

 

主要代码段：

	window.onload = function (){
		var oBtn1 = document.getElementById('btn1');
		var oBtn2 = document.getElementById('btn2');
		var oBtn3 = document.getElementById('btn3');
		var oDiv = document.getElementById('div1');
		var x = oDiv.getElementsByTagName('input');
		oBtn1.onclick = 	function (){
			for(var i = 0;i<x.length;i++){
				x[i].checked = true;
			}
		};
		oBtn2.onclick = 	function (){
			for(var i = 0;i<x.length;i++){
				x[i].checked = false;
			}
		};
		oBtn3.onclick = 	function (){
			for(var i = 0;i<x.length;i++){
				if(x[i].checked == true)
				{
					x[i].checked = false;
				}	
				else
				{
					x[i].checked = true;
				}
			}
		};
	}

 

示例完整代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>example</title>
<script>
	window.onload = function (){
		var oBtn1 = document.getElementById('btn1');
		var oBtn2 = document.getElementById('btn2');
		var oBtn3 = document.getElementById('btn3');
		var oDiv = document.getElementById('div1');
		var x = oDiv.getElementsByTagName('input');
		oBtn1.onclick = 	function (){
			for(var i = 0;i<x.length;i++){
				x[i].checked = true;
			}
		};
		oBtn2.onclick = 	function (){
			for(var i = 0;i<x.length;i++){
				x[i].checked = false;
			}
		};
		oBtn3.onclick = 	function (){
			for(var i = 0;i<x.length;i++){
				if(x[i].checked == true)
				{
					x[i].checked = false;
				}	
				else
				{
					x[i].checked = true;
				}
			}
		};
	}
</script>
</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="div1">
		<input id="btn1" type="checkbox"><br>	
		<input id="btn1" type="checkbox"><br>
		<input id="btn1" type="checkbox"><br>
		<input id="btn1" type="checkbox"><br>
		<input id="btn1" type="checkbox"><br>
		<input id="btn1" type="checkbox"><br>
		<input id="btn1" type="checkbox"><br>
		<input id="btn1" type="checkbox"><br>
		<input id="btn1" type="checkbox"><br>
		<input id="btn1" type="checkbox"><br>
		<input id="btn1" type="checkbox"><br>
	</div>
</body>
</html>

 

posted @ 2020-02-05 23:55  昨夜昙花  阅读(7)  评论(0)    收藏  举报