表单全选与取消全选

最新推荐文章于 2023-02-02 23:38:47 发布

sparrow_girl

最新推荐文章于 2023-02-02 23:38:47 发布

阅读量1.4k

点赞数

分类专栏： JS HTML+CSS 文章标签： html5 html javascript

本文链接：https://blog.csdn.net/qq_51053759/article/details/120221036

版权

本文分析了如何实现HTML表单中的全选和取消全选功能。通过控制全选按钮的checked属性来影响所有复选框的状态，并在复选框被点击时动态检查是否所有复选框都已被选中，以保持全选按钮的正确状态。

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

分析：

1、全选和取消全选：让下方所有复选框的checked属性（选中状态）跟随全选按钮
2、下方的所有复选框选中全选按钮才选中，其中一个不选中全选按钮都不选中
每次点击下面的某个复选框都要循环检查下方复选框是否都被选中
flag保存全选按钮的选中状态

HTML结构：

<table border="1" cellspacing="" cellpadding="0">
			<tr>
				<th><input type="checkbox" id="selectAll"/>全选</th>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
			</tr>
			<tr>
				<td><input type="checkbox"/></td>
				<td>张三</td>
				<td>男</td>
				<td>20</td>
			</tr>
			<tr>
				<td><input type="checkbox"/></td>
				<td>张三1</td>
				<td>男</td>
				<td>20</td>
			</tr>
			<tr>
				<td><input type="checkbox

最低0.47元/天解锁文章