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

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

aigo-2021

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

阅读量1.4k

点赞数 4

分类专栏： javaWeb 文章标签： JavaScript html

本文链接：https://blog.csdn.net/aigo_2021/article/details/124417381

版权

javaWeb 专栏收录该内容

33 篇文章 4 订阅

订阅专栏

使用Html+Css+js技术编写一个完整的表格列表内容中复选框的全选、反选效果，效果如下所示：

代码实现：

<!doctype html>
<html lang="en">
     <head>
	<meta charset="UTF-8">
	<title>复选框</title>
	<style>
        <!--使用CSS设置表格底色-->
	    #color1{background-color:#ffff00;}
	    #color2{background-color:#33ffff;}
	</style>
	<script >
		function quanxuan(){//全选事件
			for(var i=1;i<=10;i++){
				var cbox_id="cb"+i;
				var cbox=document.getElementById(cbox_id);
				if(document.getElementById("all").checked){//如果勾选全选
					cbox.checked=true;//则1~10全都勾选
				}else{
					cbox.checked=false;
				}
			}
		}
		function fanxuan(){//反选事件
			for(var i=1;i<=10;i++){
				var cbox_id="cb"+i;
				var cbox=document.getElementById(cbox_id);
				if(document.getElementById("creverse").checked){//选中反选框
					if(cbox.checked){//如果1~10中有选框被选中，则取消勾选
						cbox.checked=false;
					}else{
						cbox.checked=true;//剩下未被勾选的则被勾选上
					}
				}else{//如果取消反选框的勾选
					if(cbox.checked){
						cbox.checked=false;//则1~10已经被选中的取消选中状态
					}else{
						cbox.checked=true;//未被选中的变为选中
					}
				}
			}
		}
	</script>
 </head>
 <body>
 	<form id="form1">
		<table border="1" width="50%" align="center">
		<tr id="color1">
			<td><input type="checkbox" id="all" onclick="quanxuan()">全选</td>
			<td align="center">复选框全选示例</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td><input type="checkbox" id="cb1">1</td>
			<td>作用：</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td><input type="checkbox" id="cb2">2</td>
			<td>a.单击列头复选框全选或全不选子项</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td><input type="checkbox" id="cb3">3</td>
			<td>b.只要有一个子项没有选中，则取消列头的选中状态</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td><input type="checkbox" id="cb4">4</td>
			<td>c.当所有子项目选中时，列头复选框自动置为选中状态</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td><input type="checkbox" id="cb5">5</td>
			<td></td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td><input type="checkbox" id="cb6">6</td>
			<td></td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td><input type="checkbox" id="cb7">7</td>
			<td></td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td><input type="checkbox" id="cb8">8</td>
			<td></td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td><input type="checkbox" id="cb9">9</td>
			<td></td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td><input type="checkbox" id="cb10">10</td>
			<td>d.将复选框反过来选</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr id="color2">
			<td><input type="checkbox" id="creverse" onclick="fanxuan()">反选</td>
			<td align="center">反选示例</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		</table>
	</form>
 </body>
</html>

显示效果：

aigo-2021

关注

4
点赞
踩
9

收藏

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

使用Html+Css+js技术编写一个完整的表格列表内容中复选框的全选、反选效果，效果如下所示：代码实现：<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>复选框</title> <style>  #color1{backg...
复制链接

扫一扫