前端练习题——JavaScript 表单的全选/全不选、反选，以及隔行换色

最新推荐文章于 2022-04-24 10:11:53 发布

陈年_H

最新推荐文章于 2022-04-24 10:11:53 发布

阅读量256

点赞数

分类专栏：练习题文章标签： javascript

本文链接：https://blog.csdn.net/Today_He/article/details/108062279

版权

练习题专栏收录该内容

16 篇文章 0 订阅

订阅专栏

思路

1.全选/全不选：通过获取 “全选选项” 的状态（是否打勾），判断其他选项是否要打勾
2.反选：获取其他选项的状态，判断并且取反（优化：不需要判断状态，使用逻辑非直接取反）
3.用户自己为选项打勾时（每个勾选一个选项时都要判断），如果全部选中，自动将 “全选选项” 选中；反之，取消。
4.如果点击反选时，其他选项全被选中，则自动将 “全选选项” 选中；反之，取消

感悟

采坑

不要将id之类的名称设置与函数名称相同
js中checked 是一个boolean类型的值，但是不能再html中设置checked=“false”/checked=“true”
一个函数完成多个功能时，最好将之拆分成多个函数
设置全局变量时，考虑一下，当直接调用是否能取值
document.getElementsByName获取的是一个数组，需要通过遍历等方式取值~

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单</title>
		 <style>
	        td{
	            border: 1px solid rebeccapurple;
	            width: 150px;
	            text-align: center;
	        }
	   	 </style>
	</head>
	<body>
		<table id="form1" style="margin: auto; margin-top: 100px;">
			<thead>
				<tr>
				    <td>
				    	<input type="checkbox" id="check" > 全选
				    	<input type="button" id="fancheck" value="反选" style="font-size: 16px;">
				    </td>
				    <td>编号</td>
				    <td>姓名</td>
				    <td>年龄</td>
				    
				</tr>
			</thead>
			<tbody id="tbody">
				<tr>
				    <td><input type="checkbox" name="user" onclick="setcheck()"></td>
				    <td>1</td>
				    <td>张三</td>
				    <td>18</td>
				</tr>
				<tr>
				    <td><input type="checkbox" name="user" onclick="setcheck()"></td>
				    <td>2</td>
				    <td>李四</td>
				    <td>18</td>
				</tr>
				<tr>
				    <td><input type="checkbox" name="user" onclick="setcheck()"></td>
				    <td>3</td>
				    <td>王五</td>
				    <td>19</td>
				</tr>
				<tr>
				    <td><input type="checkbox" name="user" onclick="setcheck()"></td>
				    <td>4</td>
				    <td>赵六</td>
				    <td>17</td>
				</tr>
				<tr>
				    <td><input type="checkbox" name="user" onclick="setcheck()"></td>
				    <td>5</td>
				    <td>田七</td>
				    <td>20</td>
				</tr>
				<tr>
				    <td><input type="checkbox" name="user" onclick="setcheck()"></td>
				    <td>6</td>
				    <td>王八</td>
				    <td>19</td>
				</tr>
				<tr>
				    <td><input type="checkbox" name="user" onclick="setcheck()"></td>
				    <td>7</td>
				    <td>秦九</td>
				    <td>17</td>
				</tr>
				<tr>
				    <td><input type="checkbox" name="user" onclick="setcheck()"></td>
				    <td>8</td>
				    <td>谢十</td>
				    <td>20</td>
				</tr>
			</tbody>
		</table>
</body>
	
<script>
	//1.全选，全不选
    document.getElementById("check").onclick = function(){
    	var dianji = document.getElementById("check").checked;//获取当前状态（选中，没选中）。checked：boolean值
    	var dianji_son = document.getElementsByName("user");
    	if(dianji){//代表打钩
    		for (var i=0;i<dianji_son.length;i++) {
    			dianji_son[i].checked = true;
    		}
    	}
    	else{//代表取消打钩
    		for (var i=0;i<dianji_son.length;i++) {
  				dianji_son[i].checked = false;  			
    		}
    	}
    	
    }
     
    //2.反选
    document.getElementById("fancheck").onclick = function(){
    	/*var fancheck = document.getElementById("fancheck").checked;
    	var check_son0 = document.getElementsByName("user");
    	if(fancheck){
	    	for (var i=0;i<check_son0.length;i++) {
	    		if(check_son0[i].checked)	
	    			check_son0[i].checked = false;
	    		else
	    			check_son0[i].checked = true;
	    		
	    	}
	    }
    	else{
	    	for (var i=0;i<check_son0.length;i++) {
	    		if(check_son0[i].checked)	
	    			check_son0[i].checked = false;
	    		else
	    			check_son0[i].checked = true;
	    		
	    	}
	    }*/
	   //优化
	   var check_son0 = document.getElementsByName("user");
	   for (var i=0;i<check_son0.length;i++) {
	   		check_son0[i].checked = !check_son0[i].checked;
	   }
	 /* 4.*/ setcheck();
    }
    
    //3.判断选项是否都选了
    function allcheck(){
    	var cha = document.getElementsByName("user");
    	for (var i=0;i<cha.length;i++) {
    		if(!cha[i].checked){//如果没有全选
    			return false;
    		}
    	}
    	return true;
    }
 
    //调用上述判断函数,并为全选选项赋值
    function setcheck(){
    	var all = document.getElementById("check");
    	all.checked = allcheck();
    }







    //隔行换色
    var form0 = document.getElementById("form1");
//  alert(form0.rows.length);
    for (var i=0;i<form0.rows.length;i+=2) {
    	form0.rows[i].style.backgroundColor = "#eee";
    }
    
</script>


</html>

陈年_H

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端练习题——JavaScript 表单的全选/全不选、反选，以及隔行换色

思路1.全选/全不选：通过获取 “全选选项” 的状态（是否打勾），判断其他选项是否要打勾2.反选：获取其他选项的状态，判断并且取反（优化：不需要判断状态，使用逻辑非直接取反）3.用户自己为选项打勾时（每个勾选一个选项时都要判断），如果全部选中，自动将 “全选选项” 选中；反之，取消。4.如果点击反选时，其他选项全被选中，则自动将 “全选选项” 选中；反之，取消感悟采坑不要将id之类的名称设置与函数名称相同js中checked 是一个boolean类型的值，但是不能再html中设
复制链接

扫一扫