JavaScript全选

胡图图.Zzz

已于 2022-04-25 20:21:15 修改

阅读量1.2k

点赞数 1

分类专栏： JavaScript 文章标签： eclipse html javascript java java-ee

于 2022-04-25 20:16:28 首次发布

本文链接：https://blog.csdn.net/weixin_62356088/article/details/124413285

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

先获取到全选按钮,用来获取全选按钮的选中状态

再设置每一个多选框的选中状态和全选按钮的状态一致

以下是代码实现：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//全选
			function checkAll(){
				//获取到全选按钮,用来获取全选按钮的选中状态
				var checkAll = document.getElementById("checkAll");
				//获取到所的多选框
				var is = document.getElementsByName("c");
				// alert(is.length);
				// alert(checkAll.checked);
				//遍历多选按钮
				for(var i=0;i<is.length;i++){
					//设置每一个多选框 的选中状态 和 全选按钮的状态一致
					is[i].checked = checkAll.checked;
				}
			}
			
			function fx(){
				//获取到所有的多选框
				var is = document.getElementsByName("c");
				//遍历
				for(var i=0;i<is.length;i++){
					//设置多选框的选中状态为相反的
					is[i].checked = !(is[i].checked);
				}
			}
		</script>
	</head>
	<body>
		<table width="80%" border="1" align="center">
			<tr>
				<td colspan="5">
					全选
					<input type="checkbox" onclick="checkAll()" id="checkAll" />
					反选
					<input type="checkbox" onclick="fx()" />
				</td>
			</tr>
			<tr>
				<td>
					<input name="c" type="checkbox" />
				</td>
				<td>
					<input name="c" type="checkbox" />
				</td>
				<td>
					<input name="c" type="checkbox" />
				</td>
				<td>
					<input name="c" type="checkbox" />
				</td>
				<td>
					<input name="c" type="checkbox" />
				</td>
			</tr>
			<tr>
				<td>
					<input name="c" type="checkbox" />
				</td>
				<td>
					<input name="c" type="checkbox" />
				</td>
				<td>
					<input name="c" type="checkbox" />
				</td>
				<td>
					<input name="c" type="checkbox" />
				</td>
				<td>
					<input name="c" type="checkbox" />
				</td>
			</tr>
			<tr>
				<td>
					<input name="c" type="checkbox" />
				</td>
				<td>
					<input name="c" type="checkbox" />
				</td>
				<td>
					<input  name="c" type="checkbox" />
				</td>
				<td>
					<input name="c" type="checkbox" />
				</td>
				<td>
					<input name="c" type="checkbox" />
				</td>
			</tr>
			<tr>
				<td>
					<input name="c" type="checkbox" />
				</td>
				<td>
					<input name="c" type="checkbox" />
				</td>
				<td>
					<input name="c" type="checkbox" />
				</td>
				<td>
					<input name="c" type="checkbox" />
				</td>
				<td>
					<input name="c" type="checkbox" />
				</td>
			</tr>
		</table>
	</body>
</html>

胡图图.Zzz

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript全选

先获取到全选按钮,用来获取全选按钮的选中状态再设置每一个多选框的选中状态和全选按钮的状态一致以下是代码实现：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> //全选 function checkAll(){ //获
复制链接

扫一扫