JavaScript 复选框的全选与取消

最新推荐文章于 2024-04-25 11:38:14 发布

Wanstin

最新推荐文章于 2024-04-25 11:38:14 发布

阅读量534

点赞数 2

分类专栏： JS 文章标签： js checkbox

本文链接：https://blog.csdn.net/qq_44204959/article/details/104660747

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需求：
1）当选中全选这个复选框，下面的复选框也都会被选中，取消选中时，下面的复选框都不被选中。
2）当下面的复选框都被选中时，上面的全选也会被选中。
直接上代码吧：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>demo</title>
	</head>
	<script>
	function allCheck(){
		var status=document.getElementById("allcheck").checked;
		var btn=document.getElementsByName("check");
		for(var i=0;i<btn.length;i++){
			btn[i].checked=status;
		}
	}
	function check(){
		var flag=true;
		var all=document.getElementById("allcheck");
		var btn=document.getElementsByName("check");
		for(var i=0;i<btn.length;i++){
			if(btn[i].checked!=flag){
				flag=false;
				break;
			}
		}
		all.checked=flag;
	}
	</script>
	<body>
		<input type="checkbox" id="allcheck" onclick="allCheck()"/>全选/全不选<br />
		<input type="checkbox" name="check" onclick="check()"/>西瓜
		<input type="checkbox" name="check" onclick="check()"/>苹果
		<input type="checkbox" name="check" onclick="check()"/>香蕉
	</body>
</html>

Wanstin

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 复选框的全选与取消

需求：1）当选中全选这个复选框，下面的复选框也都会被选中，取消选中时，下面的复选框都不被选中。2）当下面的复选框都被选中时，上面的全选也会被选中。直接上代码吧：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>demo</title>...
复制链接

扫一扫