使用Html+Css+js技术编写一个完整的表格列表内容中实现复选框的全选反选效果

最新推荐文章于 2022-04-25 23:46:45 发布

LL__Sunny

最新推荐文章于 2022-04-25 23:46:45 发布

阅读量2.2k

点赞数 10

分类专栏： html 文章标签： html 表格 js实现表格全选和反选 js中的对元素的获取 js中添加onclick事件表格中的checked属性

本文链接：https://blog.csdn.net/LL__Sunny/article/details/103352801

版权

html 专栏收录该内容

16 篇文章 5 订阅

订阅专栏

使用Html+Css+js技术编写一个完整的表格列表内容中实现复选框的全选反选效果

1. 具体实现要求如下：

（1）当全选框按钮选中时：将所有的内容项前面的复选框选中，否则反之。
（2）当反选框按钮选中时：将所有的内容项前面的未选中的复选框选中，选中的复选框置为没选中，否则反之。

2. ヾ(≧▽≦*)o来让我们来看看最终的效果图：

在这里插入图片描述

3. 等不及了吧直接给出代码了

（1）body部分

<body>
	<center>	
	<table border="0.5px" id="table">
		<tr>
			<td width="80px" height="15px" bgcolor="yellow"><input type="checkbox" id="selectAll" >全选</td>
			<td width="360px" height="15px" bgcolor="yellow">复选框全选示例</td>
			<td width="15px" height="15px" bgcolor="yellow"></td>
			<td width="15px" height="15px" bgcolor="yellow"></td>
		</tr>		
		
		<tr id="one">
			<td width="80px" height="15px"><input type="checkbox">1</td>
			<td width="360px" height="15px">作用</td>
			<td width="15px" height="15px"></td>
			<td width="15px" height="15px"></td>
		</tr>		
		
		<tr id="one">
			<td width="80px" height="15px"><input type="checkbox">2</td>
			<td width="360px" height="15px">a.单机列头复选框全选或全不选子项</td>
			<td width="15px" height="15px"></td>
			<td width="15px" height="15px"></td>
		</tr>		
		
		<tr id="one">
			<td width="80px" height="15px"><input type="checkbox">3</td>
			<td width="360px" height="15px">b.只要有一个子项没选，则取消列头的选中状态</td>
			<td width="15px" height="15px"></td>
			<td width="15px" height="15px"></td>
		</tr>		
		
		<tr id="one">
			<td width="80px" height="15px"><input type="checkbox">4</td>
			<td width="360px" height="15px">c.当所有子项选中时，列头复选框自动置为选中状态</td>
			<td width="15px" height="15px"></td>
			<td width="15px" height="15px"></td>
		</tr>		
		
		<tr id="one">
			<td width="80px" height="15px"><input type="checkbox">5</td>
			<td width="360px" height="15px"></td>
			<td width="15px" height="15px"></td>
			<td width="15px" height="15px"></td>
		</tr>		
		
		<tr id="one">
			<td width="80px" height="15px"><input type="checkbox">6</td>
			<td width="360px" height="15px"></td>
			<td width="15px" height="15px"></td>
			<td width="15px" height="15px"></td>
		</tr>		
		
		<tr id="one">
			<td width="80px" height="15px"><input type="checkbox">7</td>
			<td width="360px" height="15px"></td>
			<td width="15px" height="15px"></td>
			<td width="15px" height="15px"></td>
		</tr>		
		
		<tr id="one">
			<td width="80px" height="15px"><input type="checkbox">8</td>
			<td width="360px" height="15px"></td>
			<td width="15px" height="15px"></td>
			<td width="15px" height="15px"></td>
		</tr>		
		<tr id="one">
			<td width="80px" height="15px"><input type="checkbox">9</td>
			<td width="360px" height="15px"></td>
			<td width="15px" height="15px"></td>
			<td width="15px" height="15px"></td>
		</tr>		
		
		<tr id="one">
			<td width="80px" height="15px"><input type="checkbox">10</td>
			<td width="360px" height="15px">d.将复选框反过来来选</td>
			<td width="15px" height="15px"></td>
			<td width="15px" height="15px"></td>
		</tr>

		<tr >
			<td width="80px" height="15px" bgcolor="aqua"><input type="checkbox"  id="uncheck">反选</td>
			<td width="360px" height="15px" bgcolor="aqua">反选示例</td>
			<td width="15px" height="15px" bgcolor="aqua"></td>
			<td width="15px" height="15px" bgcolor="aqua"></td>
		</tr>		
		





	</table>
	</center>
</body>

（2）css部分

<style>
		table{
			font-size: 15px;
			font-family: 宋体;
			margin-top:5%;
		}
	</style>

（3）js部分

<script>
  //1.获取元素
         // querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素  返回所有的元素， 使用 querySelectorAll() 方法
        var selectAll = document.querySelector('#selectAll');
        var ipts = document.querySelectorAll('#one input');
        //2.设置全选事件
        selectAll.onclick = function () {
            for (var i = 0; i < ipts.length; i++) {
                ipts[i].checked = selectAll.checked;//tbody中的复选框的选中状态和复选按钮中的选中状态相同即可
            }
        }
        //3.设置全选中的反选事件
        //设置计数器，用来计算tr 中id为one选中状态的复选框个数
        var count = 0;
        for (var i = 0; i < ipts.length; i++) {
            ipts[i].onclick = function () {
                this.checked?count++:count--;
                selectAll.checked =count===ipts.length;//判断count和tr id为one选中的复选框个数是否相等，如果相等复选框选中，反之这不选中
            }
        }
        
        
  //反选按钮
        //1.获取元素
        var uncheck = document.querySelector('#uncheck');
        // var ipts = document.querySelectorAll('#one input');
       	// 2.设置反选事件
        uncheck.onclick = function reverse(){
				var checks= document.querySelectorAll('#one input');
				for(var i=0;i<checks.length;i++){
					checks[i].checked=!checks[i].checked;
				}
				
			}
</script>

4. 下面是完整的代码（内嵌式）

在这里插入代码片<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>sunnyヾ(≧▽≦*)o</title>
	<style>
		table{
			font-size: 15px;
			font-family: 宋体;
			margin-top:5%;
		}
	</style>

</head>
<body>
	<center>	
	<table border="0.5px" id="table">
		<tr>
			<td width="80px" height="15px" bgcolor="yellow"><input type="checkbox" id="selectAll" >全选</td>
			<td width="360px" height="15px" bgcolor="yellow">复选框全选示例</td>
			<td width="15px" height="15px" bgcolor="yellow"></td>
			<td width="15px" height="15px" bgcolor="yellow"></td>
		</tr>		
		
		<tr id="one">
			<td width="80px" height="15px"><input type="checkbox">1</td>
			<td width="360px" height="15px">作用</td>
			<td width="15px" height="15px"></td>
			<td width="15px" height="15px"></td>
		</tr>		
		
		<tr id="one">
			<td width="80px" height="15px"><input type="checkbox">2</td>
			<td width="360px" height="15px">a.单机列头复选框全选或全不选子项</td>
			<td width="15px" height="15px"></td>
			<td width="15px" height="15px"></td>
		</tr>		
		
		<tr id="one">
			<td width="80px" height="15px"><input type="checkbox">3</td>
			<td width="360px" height="15px">b.只要有一个子项没选，则取消列头的选中状态</td>
			<td width="15px" height="15px"></td>
			<td width="15px" height="15px"></td>
		</tr>		
		
		<tr id="one">
			<td width="80px" height="15px"><input type="checkbox">4</td>
			<td width="360px" height="15px">c.当所有子项选中时，列头复选框自动置为选中状态</td>
			<td width="15px" height="15px"></td>
			<td width="15px" height="15px"></td>
		</tr>		
		
		<tr id="one">
			<td width="80px" height="15px"><input type="checkbox">5</td>
			<td width="360px" height="15px"></td>
			<td width="15px" height="15px"></td>
			<td width="15px" height="15px"></td>
		</tr>		
		
		<tr id="one">
			<td width="80px" height="15px"><input type="checkbox">6</td>
			<td width="360px" height="15px"></td>
			<td width="15px" height="15px"></td>
			<td width="15px" height="15px"></td>
		</tr>		
		
		<tr id="one">
			<td width="80px" height="15px"><input type="checkbox">7</td>
			<td width="360px" height="15px"></td>
			<td width="15px" height="15px"></td>
			<td width="15px" height="15px"></td>
		</tr>		
		
		<tr id="one">
			<td width="80px" height="15px"><input type="checkbox">8</td>
			<td width="360px" height="15px"></td>
			<td width="15px" height="15px"></td>
			<td width="15px" height="15px"></td>
		</tr>		
		<tr id="one">
			<td width="80px" height="15px"><input type="checkbox">9</td>
			<td width="360px" height="15px"></td>
			<td width="15px" height="15px"></td>
			<td width="15px" height="15px"></td>
		</tr>		
		
		<tr id="one">
			<td width="80px" height="15px"><input type="checkbox">10</td>
			<td width="360px" height="15px">d.将复选框反过来来选</td>
			<td width="15px" height="15px"></td>
			<td width="15px" height="15px"></td>
		</tr>

		<tr >
			<td width="80px" height="15px" bgcolor="aqua"><input type="checkbox"  id="uncheck">反选</td>
			<td width="360px" height="15px" bgcolor="aqua">反选示例</td>
			<td width="15px" height="15px" bgcolor="aqua"></td>
			<td width="15px" height="15px" bgcolor="aqua"></td>
		</tr>		
	</table>
	</center>
	<a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="知识共享许可协议" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />本作品采用<a rel="license" href="http://creativecommons.org/licenses/by/4.0/">知识共享署名 4.0 国际许可协议进行许可。</a>
</body>
</html>
<script>
  //1.获取元素
         // querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素  返回所有的元素， 使用 querySelectorAll() 方法
        var selectAll = document.querySelector('#selectAll');
        var ipts = document.querySelectorAll('#one input');
        //2.设置全选事件
        selectAll.onclick = function () {
            for (var i = 0; i < ipts.length; i++) {
                ipts[i].checked = selectAll.checked;//tbody中的复选框的选中状态和复选按钮中的选中状态相同即可
            }
        }
        //3.设置全选中的反选事件
        //设置计数器，用来计算tr 中id为one选中状态的复选框个数
        var count = 0;
        for (var i = 0; i < ipts.length; i++) {
            ipts[i].onclick = function () {
                this.checked?count++:count--;
                selectAll.checked =count===ipts.length;//判断count和tr id为one选中的复选框个数是否相等，如果相等复选框选中，反之这不选中
            }
        }
        
        
  //反选按钮
        //1.获取元素
        var uncheck = document.querySelector('#uncheck');
        // var ipts = document.querySelectorAll('#one input');
       	// 2.设置反选事件
        uncheck.onclick = function reverse(){
				var checks= document.querySelectorAll('#one input');
				for(var i=0;i<checks.length;i++){
					checks[i].checked=!checks[i].checked;
				}
				
			}

</script>

5.代码要是看不等就看看我简单写的设计思路吧😊😊：

（1）用table创建表格，使用tr和td编辑内容；

（2）除了全选和反选所在的里其余的内都加上相同的id即，全选和反选定义不同的id （selectAll和 uncheck）；

（3）用js语句实现，首先获取全选的对象var selectAll = document.querySelector(’#selectAll’);然后获取那些除了全选和反选之外的相同的id的对象，为全选增加点击事件如下：selectAll.onclick = function () {}通过for循环完成给input增加checked属性；

（4）置计数器，用来计算选中状态的复选框个数判断count和中的复选框个数是否相等，如果相等表格第一行中复选框选中（全选），反之这不选中。

（5）反选和全选相反将ipts[i].checked = selectAll.checked;改为checks[i].checked=!checks[i].checked;即可实现.

希望对您有所帮助😊😊😊😊😊😊！

喜欢的话就收藏一下留下您的赞吧ヾ(≧▽≦*)o！

LL__Sunny

关注

10
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
使用Html+Css+js技术编写一个完整的表格列表内容中实现复选框的全选反选效果

使用Html+Css+js技术编写一个完整的表格列表内容中实现复选框的全选反选效果1. 具体实现要求如下：（1）当全选框按钮选中时：将所有的内容项前面的复选框选中，否则反之。（2）当反选框按钮选中时：将所有的内容项前面的未选中的复选框选中，选中的复选框置为没选中，否则反之。2. ヾ(≧▽≦*)o来让我们来看看最终的效果图：3. 等不及了吧直接给出代码了（1）body部分&l...
复制链接

扫一扫