全选，反选，清除

最新推荐文章于 2023-12-20 15:58:51 发布

DB-Ruan

最新推荐文章于 2023-12-20 15:58:51 发布

阅读量595

点赞数

分类专栏：技术日志 JavaScript

本文链接：https://blog.csdn.net/feizhoujeep/article/details/38859453

版权

JavaScript 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

技术日志

23 篇文章 0 订阅

订阅专栏

思路：

获取checkbox元素数组。添加按钮事件。全选：遍历数组，为每一个checked属性的值赋为"checked“或者true; 反选：遍历数组，判断，if(arr[i].checked)，则将其checked属性值置为""空,else{将checked属性值赋为"checked"或者true;}

代码：

<html>
	<head>
		<meta charset="utf-8"/>
		<title>全选，反选</title>
		<script>
			window.οnlοad=function(){
				oDiv=document.getElementById("option");
				oInput=oDiv.getElementsByTagName("input");
				oChooseAll=document.getElementById("all");
				oReverse=document.getElementById("reverse");
				oChooseAll.οnclick=function(){
					for(var i=0;i<oInput.length;i++){
						oInput[i].checked="checked";
					}
				}
				oReverse.οnclick=function(){
					for(var i=0;i<oInput.length;i++){
						if(oInput[i].checked){
							oInput[i].checked="";
						}
						else{
							oInput[i].checked="checked";
						}
					}	
				}
			}
		</script>
	</head>
	<body>
	<div id="option">
	<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/>
	<input type="checkbox" />药材<br/>
	</div>
	<input id="all" type="checkbox" />全选<input id="reverse" type="checkbox"/>反选
	</body>
</html>