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

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>