js实现复选框/全选、全不选

最新推荐文章于 2023-02-21 15:38:18 发布

因火成烟

最新推荐文章于 2023-02-21 15:38:18 发布

阅读量1.9k

点赞数

文章标签： js web前端 css html 复选框

本文链接：https://blog.csdn.net/thefoma/article/details/45191807

版权

1.点击全选，所有复选框选中

2，根据复选框复选个数更新全选框状态

3.根据全选框的状态，切换label，flag

4.反选

上面是复选框的各种选项情况，

实现逻辑

一、.给全选框一个鼠标点击事件，把全选框的的状态给复选框

在这里要加上2,3情况的解决

二、反选选项，给反选一个鼠标点击事件，通过循环把复选框的状态进行切换

在这里要加上2,3这2种情况；

三、写一个函数解决2,3问题；

四、给每一个复选框加上鼠标事件，通过三来解决2问题

三的实现：

var isCheckAll = function () {
	for (var i = 1, n = 0; i < oInput.length; i++) {
		//		oInput[i].checked && n++  /*可以这样写*/
		if (oInput[i].checked) {
			n++;
		}
	}
	//	oInput[0].checked = n == oInput.length - 1;/*可以这样写*/
	if (n == oInput.length - 1) {
		oInput[0].checked = true;
	} else {
		oInput[0].checked = false;
	}
	oLabel.innerHTML = oInput[0].checked ? "全不选" : "全选"
};

先通过循环，把复选框选中的个数用n记录下来，

判断，若n等于所有复选框的个数，则全选框的状态为true,然后同时根据条件表达式label的状态切换为全不选

贴上全部js代码：

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

css3代码：

body,
dl,
dt,
dd,
p {
	margin: 0;
	padding: 0;
}

body {
	font-family: Tahoma;
	font-size: 12px;
}

label,
input,
a {
	vertical-align: middle;
}

label {
	padding: 0 10px 0 5px;
}

a {
	color: #09f;
	text-decoration: none;
}

a:hover {
	color: red;
}

dl {
	width: 120px;
	margin: 10px auto;
	padding: 10px 5px;
	border: 1px solid #666;
	border-radius: 5px;
	background: #fafafa;
}

dt {
	padding-bottom: 10px;
	border-bottom: 1px solid #666;
}

dt label {
	font-weight: 700;
}

p {
	margin-top: 10px;
}

vertical-align表示标签之间的对齐方式

html5代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>复选框（checkbox）全选/全不选/返选</title>
	<link rel="stylesheet" href="y.css">
</head>

<body>
	<dl>
		<dt><input type="checkbox" id="checkAll" /><label>全选</label><a href="javascript:;">反选</a></dt>
		<dd>
			<p>
				<input type="checkbox" name="item" />
				<label>选项（一）</label>
			</p>
			<p>
				<input type="checkbox" name="item" />
				<label>选项（二）</label>
			</p>
			<p>
				<input type="checkbox" name="item" />
				<label>选项（三）</label>
			</p>
			<p>
				<input type="checkbox" name="item" />
				<label>选项（四）</label>
			</p>
			<p>
				<input type="checkbox" name="item" />
				<label>选项（五）</label>
			</p>
			<p>
				<input type="checkbox" name="item" />
				<label>选项（六）</label>
			</p>
			<p>
				<input type="checkbox" name="item" />
				<label>选项（七）</label>
			</p>
			<p>
				<input type="checkbox" name="item" />
				<label>选项（八）</label>
			</p>
			<p>
				<input type="checkbox" name="item" />
				<label>选项（九）</label>
			</p>
			<p>
				<input type="checkbox" name="item" />
				<label>选项（十）</label>
			</p>
		</dd>
	</dl>
	<center>1、切换全选/全不选文字；2、根据选中个数更新全选框状态；</center>
	<script src="y.js"></script>
</body>

</html>

因火成烟

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js实现复选框/全选、全不选

1.点击全选，所有复选框选中2，根据复选框复选个数更新全选框状态3.根据全选框的状态，切换label，flag4.反选上面是复选框的各种选项情况，实现逻辑一、.给全选框一个鼠标点击事件，把全选框的的状态给复选框在这里要加上2,3情况的解决二、反选选项，给反选一个鼠标点击事件，通过循环把复选框的状态进行切换在这里要加上2,3这2种情况；三、写一
复制链接

扫一扫