【fgm.cc练习2-12】复选框（checkbox）全选/全不选/反选

最新推荐文章于 2019-12-02 16:28:49 发布

denguing

最新推荐文章于 2019-12-02 16:28:49 发布

阅读量270

点赞数

分类专栏： fgm.cc 文章标签： HTML css JavaScript

本文链接：https://blog.csdn.net/DGT4720/article/details/103073322

版权

fgm.cc 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

练习地址：http://www.fgm.cc/learn/lesson2/12.html
在这里插入图片描述
实现要点：

判断checkbox是否被选中：box.checked，是的话返回true；否则false
全选：循环设置每个checkbox.checked = true；文本innerText = “全不选”
全不选：上述反向
反选：循环+if判断该checkbox是否被选中，如果选中设置为false，反之
这个思路写的代码其实很累赘，看了源代码，比较简单，后面也贴出来。
下面是我写的：

HTML

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="utf-8">
	<title>复选框（checkbox）全选/全不选/反选</title>
	<link rel="stylesheet" type="text/css" href="12_inverse.css">
</head>
<body>
	<div id="container">
		<input type="checkbox"><strong>全选</strong>
		<p>反选</p>
		<hr>
		<input type="checkbox">选项（一）
		<input type="checkbox">选项（二）
		<input type="checkbox">选项（三）
		<input type="checkbox">选项（四）
		<input type="checkbox">选项（五）
		<input type="checkbox">选项（六）
		<input type="checkbox">选项（七）
		<input type="checkbox">选项（八）
		<input type="checkbox">选项（九）
		<input type="checkbox">选项（十）
	</div>
	<p id="instruction">1、切换全选/全不选文字；2、根据选中个数更新全选框状态；</p>
	<script type="text/javascript" src="12_inverse.js"></script>
</body>
</html>

CSS

#container {
	width: 130px;
	margin: 0 auto;
	border: 1px solid gray;
	font-size: 14px;
	padding: 7px 10px;
	background: lightgray;
}
input {
	margin: 7px 10px;
}
p {
	position: absolute;
	top: 7px;
	right: 635px;
	color: blue;
}
p:hover {
	color: red;
	cursor: pointer;
}
#instruction {
	color: gray;
	font-size: 12px;
	position: absolute;
	top: 330px;
	right: 530px;
}

JavaScript

window.onload = function() {
	var allSelect = document.getElementsByTagName("input")[0];
	var change = document.getElementsByTagName("strong")[0];
	var choose = document.getElementsByTagName("input");
	var p = document.getElementsByTagName("p")[0];
	allSelect.onclick = function() {
		if(allSelect.checked){
			change.innerText = "全不选";
			for(var i=1; i<choose.length; i++){
				choose[i].checked = true;
			}
		}else{
			for(var i=1; i<choose.length; i++){
				choose[i].checked = false;
			}
			change.innerText = "全选";
		}
	}
	p.onclick = function() {
		for(var i=1; i<choose.length-1; i++){
			if(choose[i].checked){
				choose[i].checked = false;
			}else{
				choose[i].checked = true;
			}
		}
	}
}

JavaScript这里有一个问题就是：我直接判断第一个checkbox是否被选中来进行后面的设置是行不通的，需要在外面再添加一个onclick事件的function，请问大家知道这是为什么吗，就像下面这样：去掉注释。希望朋友们指点迷津啊！感谢！

//allSelect.onclick = function() {
		if(allSelect.checked){
			change.innerText = "全不选";
			for(var i=1; i<choose.length; i++){
				choose[i].checked = true;
			}
		}else{
			for(var i=1; i<choose.length; i++){
				choose[i].checked = false;
			}
			change.innerText = "全选";
		}
	//}

下面是网页源代码的JavaScript方法：

var isCheckAll = function ()
	{
		for (var i = 1, n = 0; i < oInput.length; i++)
		{
			oInput[i].checked && n++	
		}
		oInput[0].checked = n == oInput.length - 1;
		oLabel.innerHTML = oInput[0].checked ? "全不选" : "全选"
	};
//全选/全不选
	oInput[0].onclick = function ()
	{
		for (var i = 1; i < oInput.length; i++)
		{
			oInput[i].checked = this.checked			
		}
	};
	//反选
	oA.onclick = function ()
	{
		for (var i = 1; i < oInput.length; i++)
		{
			oInput[i].checked = !oInput[i].checked
		}
	};
	//根据复选个数更新全选框状态
	for (var i = 1; i < oInput.length; i++)
	{
		oInput[i].onclick = function ()
		{
			isCheckAll()
		}	
	}

瞬间就觉得自己low爆了。我太菜了！
还有啊，最下面那句话用center标签就行，自己瞎几把搞了position，还以为自己搞得多辛苦终于完成了，殊不知自己搞得乱七八糟。
还有一句：我打完第二课啦！准备向第三课进军！！！加油啊denguing~

denguing

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【fgm.cc练习2-12】复选框（checkbox）全选/全不选/反选

练习地址：http://www.fgm.cc/learn/lesson2/12.html实现要点：判断checkbox是否被选中：box.checked，是的话返回true；否则false全选：循环设置每个checkbox.checked = true；文本innerText = “全不选”全不选：上述反向反选：循环+if判断该checkbox是否被选中，如果选中设置为false，反...
复制链接

扫一扫

专栏目录