【前端 HTML+CSS+JavaScript(JS)】DOM练习-checkbox实现全选带注释/总结

_小鹰

已于 2022-02-15 22:51:52 修改

阅读量252

点赞数 1

分类专栏：前端文章标签： javascript 前端 css html

于 2022-02-14 21:16:58 首次发布

本文链接：https://blog.csdn.net/cc2855816075/article/details/122932253

版权

前端专栏收录该内容

38 篇文章 1 订阅

订阅专栏

作业要求：

在这里插入图片描述

效果：

在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业2-全选</title>
		<script src="utility.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			
			*{
				margin: 0px;
				padding: 0px;
				border: 0px solid black;
			}
			
			 ul li{
				width: 80px;
				display: inline-block;
				border: 1px solid #000000;
				text-align: center;
			 }
			 
			 ul li:first-child{
			 	width: 70px;
			 }
			 
			 ul li:nth-child(2){
				 width: 155px;
			 }
			 
			 ul li:nth-child(3),ul li:nth-child(4){
				width: 75px;
			 }
			 
			 #t1,td{
				border: 1px solid #000;
				width: 400px;
				border-collapse: separate;
				text-align: center;
			 }
			 
			 input[type='button']{
				 width: 110px;
				 height: 50px;
				 margin: 5px 130px;
				 border: 1px solid;
			 }
			 
		</style>
	</head>
	<body>
		<div id="b-box">
			<!-- 去除无序列表的点 -->
			<ul style="list-style: none;">
				<li><input type="checkbox" name="" id="checkAll" value="" onclick="checkAll()">全选</input></li>
				<li>学号</li>
				<li>姓名</li>
				<li>性别</li>
			</ul>
			
			<table id="t1">
				<tr>
					<td><input type="checkbox" name="" value="" class="check"></input></td>
					<td>2018334103</td>
					<td>陈宸</td>
					<td>男</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="" value="" class="check"></input></td>
					<td>2018334103</td>
					<td>陈宸</td>
					<td>男</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="" value="" class="check"></input></td>
					<td>2018334103</td>
					<td>陈宸</td>
					<td>男</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="" value="" class="check"></input></td>
					<td>2018334103</td>
					<td>陈宸</td>
					<td>男</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="" value="" class="check"></input></td>
					<td>2018334103</td>
					<td>陈宸</td>
					<td>男</td>
				</tr>
			</table>
			
			<input type="button" name="" id="" value="雪藏" onclick="dis()"/>
			
			<script type="text/javascript">
				function checkAll(){
					var check = document.getElementsByClassName("check");
					for(var i = 0;i < check.length; ++i){
						if(check[i].type == "checkbox"){
							check[i].checked = $("checkAll").checked;
						}
					}
				}
				
				function dis(){
					if(document.querySelector("[type = 'button']").value == '雪藏'){
						$("t1").style.color = "#fff"
						document.querySelector("[type = 'button']").value = '显示';
					}
					else{
						$("t1").style.color = "#000"
						document.querySelector("[type = 'button']").value = "雪藏";
					}
					
				}
			</script>
			
			
		</div>
	</body>
</html>

其中用到的utility.js文件：

function $(id){
	return document.getElementById(id);
}
function l(a){
	console.log(a);
}

DOM练习文件：

https://download.csdn.net/download/cc2855816075/80848641

注意：

1、去除无序列表li前面的点：
<ul style=“list-style: none;”>

_小鹰

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录