JS之复选框的全选和全不选

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

我不是浩学生

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

阅读量233

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/javaKingofFuture/article/details/105715264

版权

JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JS案例之复选框的全选和全不选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {

            //1.需求：第一个勾选 下边都要勾选。第一个取消下边都要取消

            var first = document.getElementById("first");

            var hobbies = document.getElementsByName("hobby");


            first.onclick = function () {

                for (var i = 0; i < hobbies.length; i++) {
                    hobbies[i].checked = first.checked
                }

            }

            //2.需求：如果有 三个勾选 则 第一个也勾选
            /*分析：
            *   1.要先给每个框都绑定点击事件
            *   1.1：先获取复选框的总数
            *   2.再定义一个数来记录有几个框勾选上了看是不是等于那个总数*/

            var total = hobbies.length

            for (var i = 0; i < hobbies.length; i++) {
                hobbies[i].onclick = function () {
                    var sum = 0;//每点一次，sum就初始化一次
                    for (var i = 0; i < hobbies.length; i++) {
                        if (hobbies[i].checked) {
                            sum++;//如果sum=total则说明，全部勾选上了
                        }
                    }

                    // sum == total ? first.checked = true : first.checked = false
                    first.checked = (sum == total);

                }
            }


        }
    </script>
</head>
<body>
<input type="checkbox" id="first"><br/>
<input type="checkbox" name="hobby" value="dongman">动漫<br/>
<input type="checkbox" name="hobby" value="dianying">电影<br/>
<input type="checkbox" name="hobby" value="meinv">美女<br/>
</body>
</html>

我不是浩学生

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS之复选框的全选和全不选

JS案例之复选框的全选和全不选<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload = function () {...
复制链接

扫一扫