js 实现多选框

最新推荐文章于 2024-05-22 11:09:24 发布

ptsph

最新推荐文章于 2024-05-22 11:09:24 发布

阅读量6.5k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/li_yuan_long/article/details/80043292

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

要求1：点击全选实现多选框的全部选中，再次点击全选，将所有多选框取消选中①

要求2：点击任何4个选项的时候，如果4个多选框全部都选中，则【全选】这个多选框要选中，否则，【全选】这个多选框不要选中，如下图

、

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
       <script>
       	 
			function selectAll(){
			var all= document.getElementById("All").checked
		  	var checkboxs=document.getElementsByName("items");
				if(all==true){
					for(var i=0;i<checkboxs.length;i++){
						checkboxs[i].checked=true;
					}
                 }else{
                  	for(var i=0;i<checkboxs.length;i++){
						checkboxs[i].checked=false;
					}
                  }
			}
			function selecteach(){
				var all= document.getElementById("All").checked
		       	var checkboxs=document.getElementsByName("items");
				var count =0;
				for(var i=0;i<checkboxs.length;i++){
					if(checkboxs[i].checked == true)
	                  count++;
					}
				if(count == 4){
					document.getElementById("All").checked=true;
				}else{
					document.getElementById("All").checked=false;
				}
			}
			
		</script>
	</head>
	<body>
		
		<input type="checkbox" οnclick="selectAll()" id="All"/>全选
		<br />
		<ul>
			<li><input type="checkbox" name="items" οnclick="selecteach()" />第一行<br /></li>
			<li><input type="checkbox" name="items" οnclick="selecteach()" />第二行<br /></li>
			<li><input type="checkbox" name="items" οnclick="selecteach()" />第三行<br /></li>
			<li><input type="checkbox" name="items" οnclick="selecteach()" />第四行<br /></li>
		</ul>
	</body>
</html>

ptsph

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
js 实现多选框

要求1：点击全选实现多选框的全部选中，再次点击全选，将所有多选框取消选中①要求2：点击任何4个选项的时候，如果4个多选框全部都选中，则【全选】这个多选框要选中，否则，【全选】这个多选框不要选中，如下图、&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&l..
复制链接

扫一扫