js的全选案例

最新推荐文章于 2023-02-28 21:58:39 发布

小蝌蚪找玛玛

最新推荐文章于 2023-02-28 21:58:39 发布

阅读量386

点赞数

分类专栏： JavaScript学习笔记

JavaScript学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

参考文章：

1.https://www.cnblogs.com/biehongli/p/5916214.html

2.https://blog.csdn.net/big_data1/article/details/79084879

需求分析：

1.点击全选框，所有选项被选中；

2.全选情况下，再次点击全选框，所有选项都不选；

3.全选情况下，取消某一个或几个子选项，全选框变为不选中；

4.没有点击全选的情况下，选中了所有子选项，全选框自动选中。

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选案例</title>
</head>
<body>
    <!-- this指当前元素对象,即input元素 -->
    <input type="checkbox" id="all" onclick="selectAll(this);"/>全选<br/>
    <input type="checkbox" name="hobby" onclick="selectSingle();"/>画画
    <input type="checkbox" name="hobby" onclick="selectSingle();"/>跳舞
    <input type="checkbox" name="hobby" onclick="selectSingle();"/>乒乓球
    <input type="checkbox" name="hobby" onclick="selectSingle();"/>爬山
    <input type="checkbox" name="hobby" onclick="selectSingle();"/>看电影
    <script type="text/javascript">
        
	function selectAll(obj) {
			
	    // alert(obj.checked);
			
	    // 获取name=hobby的复选框
	    var hobbies = document.getElementsByName("hobby");
			
	    // alert(hobbies.length);
	    for (var i = 0; i < hobbies.length; i++) {
		hobbies[i].checked = obj.checked;
	    }
	}
		
	function selectSingle() {
			
	    // 获取name=hobby的复选框
	    var hobbies = document.getElementsByName("hobby");
	    var count = 0;
			
	    // 遍历所有的复选框
	    for (var i = 0; i < hobbies.length; i++) {
	        if (hobbies[i].checked) {
		    count++;
		}
	    }
			
	    // 如果选中复选框的个数=获取复选框的个数
	    if (count == hobbies.length) {
				
		// 设置id=all的复选框为选中
		document.getElementById("all").checked = true;
	    } else {
		document.getElementById("all").checked = false;
	    }
        }
    </script>
</body>
</html>

小蝌蚪找玛玛

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js的全选案例

参考文章：1.https://www.cnblogs.com/biehongli/p/5916214.html2.https://blog.csdn.net/big_data1/article/details/79084879需求分析：1.点击全选框，所有选项被选中；2.全选情况下，再次点击全选框，所有选项都不选；3.全选情况下，取消某一个或几个子选项，全选框变为不选中；...
复制链接

扫一扫