JavaScript全选、全不选、反选

最新推荐文章于 2023-10-23 14:09:15 发布

原创最新推荐文章于 2023-10-23 14:09:15 发布 · 215 阅读

1 ·

CC 4.0 BY-SA版权

前端学习专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现表格中复选框全选、全不选及反选功能的方法。通过获取所有具有特定class属性的复选框元素，可以轻松地在点击按钮时更改其选中状态。

点击相应按钮分别实现全选、全不选、反选功能
在这里插入图片描述
分析：
需要改变每一栏复选框的状态
每一栏数组遍历根据class属性获取
复选框状态 true和 false 给checked属性赋相应的值选中时true 不选就是false
html代码

<table align="center" border="1px" width="600px" height="200px">
			<tr align="center">
				<td colspan="4">
					<button id="qx" onclick="qx()">全选</button>
					<button id="qbx" onclick="qbx()">全不选</button>
					<button id="fx" onclick="fx()">反选</button>
				</td>
			</tr>
			<tr>
				<td width="20px">
					<input type="checkbox" id="checkbox1" class="checkbox"/>
				</td>
				<td>1</td>
				<td>手机</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" id="checkbox2" class="checkbox"/>
				</td>
				<td>2</td>
				<td>相机</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" id="checkbox3" class="checkbox"/>
				</td>
				<td>3</td>
				<td>箱包</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" id="checkbox4" class="checkbox"/>
				</td>
				<td>4</td>
				<td>家具</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
		</table>

JavaScript代码

<script>
	function qx(){
		var arr = document.getElementsByClassName("checkbox");
		for(var i=0;i<arr.length;i++){
			arr[i].checked= true;
		}
	}
	function qbx(){
		var arr = document.getElementsByClassName("checkbox");
		for(var i=0;i<arr.length;i++){
			arr[i].checked= false;
		}
	}
	function fx(){
		var arr = document.getElementsByClassName("checkbox");
		for(var i=0;i<arr.length;i++){
			arr[i].checked= !arr[i].checked;
		}
	}
</script>