Js实现input全选、全不选、反选功能------Sestid

最新推荐文章于 2024-04-02 19:39:43 发布

Sestid

最新推荐文章于 2024-04-02 19:39:43 发布

阅读量632

点赞数 1

分类专栏： Js和jQuery实现的特效❤️

原文链接：https://blog.csdn.net/qq_44322357/article/details/102510750

版权

Js和jQuery实现的特效❤️ 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

效果图：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全选和反选</title>
		<script type="text/javascript">
			function $(id){
				return document.getElementById(id);
			}
			window.onload = function(){
				//全选
				$("chkAll").onclick = function(){
					var ipts = $("favors").getElementsByTagName("input");
					for (var i = 0; i < ipts.length; i++) {
						ipts[i].checked = $("chkAll").checked;
					}
				}
				
				//反选
				$("reverse").onclick = function(){
					var res = $("favors").getElementsByTagName("input");
					for (var i = 0; i < res.length; i++) {
						res[i].checked = !res[i].checked;
					}
				}
				
				//使全选框和下面各个兴趣框同步
				var fvs = $("favors").getElementsByTagName("input");
				for (var i = 0; i < fvs.length; i++) {
					fvs[i].onclick = function(){
						var isCheckAll = true;
						for (var j = 0; j < fvs.length; j++) {
							if (!fvs[j].checked) {
								isCheckAll = false;
								break;
							}
						}
						$("chkAll").checked = isCheckAll;
					}
				}
				
			}
		</script>
	</head>
	<body>
		<h1>你的兴趣是什么？</h1>
		<input type="checkbox" id="chkAll" value="全选" /> <label for="chkAll">全选</label>
		<input type="button"  id="reverse" value="反选" />
		<p></p>
		<div id="favors">
			<input type="checkbox">Python
			<input type="checkbox">Java
			<input type="checkbox">JavaScript
			<input type="checkbox">C#
			<input type="checkbox">C++
		</div>
	</body>
</html>

Sestid

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Js实现input全选、全不选、反选功能------Sestid

效果图：代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>全选和反选</title> <script type="text/javascript"> function $(id){ return...
复制链接

扫一扫