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

最新推荐文章于 2022-08-28 20:54:31 发布

原创最新推荐文章于 2022-08-28 20:54:31 发布 · 297 阅读

1 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现复选框全选和全不选功能的方法。通过监听第一个复选框的状态变化，可以联动控制一组复选框的选中状态，同时，当所有复选框被选中时，第一个复选框也会自动选中，反之亦然。此功能在表单操作中非常实用。

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>