HTML、CSS、Jquery综合练习之全选、全不选与反选

戈多0316

于 2023-05-17 15:38:46 发布

阅读量655

点赞数 3

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_61399134/article/details/130727177

版权

该文章展示了一个使用HTML、CSS和jQuery实现的前端功能示例，具体是关于全选、全不选和反选操作的复选框控制。当用户点击全选按钮，所有复选框会被选中；点击全不选，所有复选框取消选中；点击反选按钮，则当前选中的复选框变为未选中，未选中的变为选中状态。

摘要由CSDN通过智能技术生成

综合使用前端三件套的一个小题目：

要求：

全选：选中上⾯的复选框，下⾯所有复选框设置为选中状态

全不选：取消选中⾯⽅的复选框，下⾯所有的复选框设置为未选状态

反选：点击反选按钮，下⽅选中的复选框设置为未选状态，下⽅未选中的复选框设置为选中状态

效果图：

点击图中的全选框，没有选项被选中时，将选中所有选项；有选项被选中时，将取消所有选中选项；点击图中的反选框，会反选未选中的选项

代码：

CSS在代码第一部分；HTML在代码第二部分；使用jQuery实现JS效果，在代码第三部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全选、全不选与反选</title>
		<style>
			body{
				background-color: beige;
				font-size:15px;
				font-family:"宋体";
				}
			table{
				border-collapse: collapse; /* 合并单元格边框 */
				border-spacing: 0; /* 设置单元格间距为0 */
				}
				/* 表头样式 */
			th{
				align-items: center;
				background-color: bisque;
				}
				/* 单元格样式 */
			td{
				width: 150px;
				height: 20px;	
				}
			.td2{
				width: 80px;
				}
			.center-checkbox {
				text-align: center; /* 将多选框及其标签水平居中 */
				display: flex; /* 使用 Flex 布局 */
				justify-content: center; /* 将元素垂直居中 */
				align-items: center; /* 将元素垂直居中 */
				}
		</style>
	</head>
	
	<body>
		<!-- 创建表格 -->
		<!-- 第一行 -->
		<table  border="1" class="center-checkbox">
		<tr><th>
				<!-- 全选框和反选按钮 -->
				<input type="checkbox" onclick="selectAll2()"/>
				<input type="button" value="反选" onclick="selectInvert()"/>
				</th>
				<th>编号</th>
				<th class="th1">分类名称</th>
				<th class="th1">分类描述</th>
				<th class="th1">操作</th>
		</tr>
			
		<tr>
				<td class="td2">
					<input type="checkbox" name="select"/>
				</td>
				<td align="center">1</td>
				<td align="center">手机数码</td>
				<td align="center">手机数码</td>
				<td align="center"> <button>修改</button> <button>删除</button>  </td>
		</tr>
		<tr>
				<td class="td2">
					<input type="checkbox" name="select"/>
				</td>
				<td align="center">3</td>
				<td align="center">电脑办公</td>
				<td align="center">电脑办公</td>
				<td align="center"><button>修改</button> <button>删除</button>  </td>
		</tr>
		<tr>
				<td class="td2">
					<input type="checkbox" name="select"/>
				</td>
				<td align="center">4</td>
				<td align="center">手机数码</td>
				<td align="center">手机数码</td>
				<td align="center"><button>修改</button> <button>删除</button>  </td>
		</tr>
		<tr>
				<td class="td2">
					<input type="checkbox" name="select" />
				</td>
				<td align="center">2</td>
				<td align="center">电脑办公</td>
				<td align="center">电脑办公</td>
				<td align="center"><button>修改</button> <button>删除</button>  </td>
		</tr>
		</table>
	</body>
	
	<!-- js部分：使用jquery -->
	<script src="jquery-3.4.1.js" type="text/javascript"></script>
	<script type="text/javascript">
	
		/* 反选功能 */
	function selectInvert() {
		var checkbox = $("input[name='select']");
			checkbox.each(function() {
		var status = !$(this).prop("checked");
			$(this).prop("checked", status);
		})}
	
		/* 全选和全不选功能*/
	function selectAll2() {
		var checkboxes = $("input[name='select']");
		var checked = false;
	 // 遍历每个选择框，检查是否有至少一个未选中的
			$.each(checkboxes, function(i, checkbox) {
	    if (!$(checkbox).prop('checked')) {
			checked = true;
	      return false; // 退出循环
			} });
	 // 根据 checked 的值对所有选择框进行选中或取消选中操作
		checkboxes.prop('checked', checked);
	}
		
	</script>
</html>

戈多0316

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
HTML、CSS、Jquery综合练习之全选、全不选与反选

点击图中的全选框，没有选项被选中时，将选中所有选项；有选项被选中时，将取消所有选中选项；点击图中的反选框，会反选未选中的选项。反选：点击反选按钮，下⽅选中的复选框设置为未选状态，下⽅未选中的复选框设置为选中状态。CSS在代码第一部分；HTML在代码第二部分；使用jQuery实现JS效果，在代码第三部分。全不选：取消选中⾯⽅的复选框，下⾯所有的复选框设置为未选状态。全选：选中上⾯的复选框，下⾯所有复选框设置为选中状态。
复制链接

扫一扫