js完成全选反选

// 获取全选框
        var qx = document.getElementById('all')
        // 获取选项框
        var ckd = document.getElementsByClassName('ckd')
        // 获取反选按钮
        var rvs = document.getElementById('rvs')
        // console.log(qx)
        // console.log(ckd)
        // console.log(rvs)

        // 对全选设置点击事件
        qx.onclick = function () {
            // 循环遍历所有选项
            for (var i = 0; i < ckd.length; i++) {
                // console.log(ckd[i].checked)
                // 设置每个选项的选中状态与全选框一致
                ckd[i].checked = qx.checked
            }
        }
        // 封装一个方法用来判断全选框的状态
        function Sqx() {
            // 声明一个变量用来控制全选框的状态，设置默认值true
            var flag = true
            // 循环遍历所有选项
            for (var i = 0; i < ckd.length; i++) {
                // 添加判断，如果有选项的选中状态是未选中则进入if执行
                if(ckd[i].checked == false) {
                    // 因为有选项未选中，则给控制全选状态的变量赋值false
                    flag = false
                }
            }
            // 如果选项都是选中状态，则不会进入if判断内，那么控制全选的变量为初始设置的值true
            // 如果选项中有未选中的选项，那么进入if判断后，控制全选状态的变量会赋值为false
            // 把控制全选状态的变量赋值给全选，选项都选中则全选勾选，有选项未选中则全选不勾选
            qx.checked = flag
        }
        // 对选项设置点击事件
        for (var i = 0; i < ckd.length; i++) {
            ckd[i].onclick = function(){
                // 每一个选项点击事件触发后都调用封装好的方法，对全选框的状态进行判断
                // 判断全选框是否该被选中
                Sqx()
            }
        }
        // 对反选按钮设置点击事件
        rvs.onclick = function() {
            //循环遍历所有选项
            for (var i = 0; i < ckd.length; i++) {
                // 对每个选项的checked值取反
                ckd[i].checked = !ckd[i].checked
            }
            // 判断全选框是否该被选中
            Sqx()
        }

每次点击事件触发后都要判断全选框的选中状态，所以方便后续使用把全选框的判断和赋值封装成一个方法，每次点击事件后都调用方法对全选框进行判断是否勾选