全选,取消全选(字符串拼接)

冷不防 2021-09-17 10:56 386阅读 0赞

![20181228161734725.png][]

// 列表拼接
    function admin_list() {
        $.ajax({
            url: 'api/list',
            type: 'get',
            headers: {
                Accept: "application/json; charset=utf-8"
            },
            async: false,
            success: function (data) {
                if (data.code !== '200') {
                    return alert(data.msg)
                }
                var data = data.model;
                var str = '';
                str += '<li class="list-group-item admin-list-header">';
                str += '<div class="left">';
                str += '<label>模块</label>';
                str += '<input type="checkbox" id="all_check" value="" onclick="queryAll(this)" >';
                str += '</div>';
                str += '<div class="right">权限</div>';
                str += '</li>';
    
                for (var i = 0; i < data.length; i++) {
                    str += '<li class="list-group-item admin-list-item">';
                    str += '<div class="left">';
                    str += '<label>' + data[i].text + '</label>';
                    str += '<input type="checkbox" onclick="checkRow(this,this.name)" value="" name="' + data[i].name + '">';
                    str += '</div>';
                    str += '<div class = "right" >';
                    for (var j = 0; j < data[i].child.length; j++) {
                        str += '<span><input type = "checkbox" onclick = "checkOne(this.name)" value = "' + data[i].child[j].id + '" name = "' + data[i].child[j].pname + '">';
                        str += '<label> ' + data[i].child[j].text + '</label></span>'
                    }
                    str += '</div></li>';
                }
                $('#admin-list').html(str);
            }
        })
    }
    
    //全选,取消
    function queryAll(dom) {
        if ($(dom).is(":checked") == true) {
            $("#admin-list").find('input').prop("checked", true); //全选
        } else {
            $("#admin-list").find('input').prop("checked", false); //取消
        }
    }
    
    document.querySelector('#admin-list').addEventListener('click', function (e) {
    
        if (e.target.tagName == 'INPUT' && $(e.target).is(':checked') == false) { //如果有一个取消,全选按钮取消
            $('#all_check').prop('checked', false);
        }
        var choiceSelect = $('#admin-list').find('input').not('#all_check').length;
        var choiceLength = $('#admin-list').find('input:checked').not('#all_check').length;
        if (choiceSelect == choiceLength) { //所有按钮被选中,全选按钮选中
            $('#all_check').prop('checked', true);
        }
    })
    
    
    // 同行全选,取消
    function checkRow(dom, name) {
        // alert(1)
        if ($(dom).is(":checked") == true) {
            $("#admin-list").find("input[name=" + name + "]").prop("checked", true); //全选
        } else {
            $("#admin-list").find("input[name=" + name + "]").prop("checked", false); //取消
        }
    }
    
    // 同行,选择一个取消一个,行全选对应取消和选择
    function checkOne(name) {
        $('#admin-list').find("input[name=" + name + "]").not(".left input[name=" + name + "]").each(function (index, item) {
            if ($(item).is(':checked') == false) { // 如果有一个取消,全选按钮取消
                $(".left input[name=" + name + "]").prop('checked', false);
            }
        })
        var choiceSelect = $('#admin-list').find("input[name=" + name + "]").not(".left input[name=" + name + "]").length;
        var choiceLength = $('#admin-list').find("input[name=" + name + "]:checked").not(".left input[name=" + name + "]").length;
    
        if (choiceSelect == choiceLength) { //所有按钮被选中,全选按钮选中
            $(".left input[name=" + name + "]").prop('checked', true);
        }
    }

[20181228161734725.png]: /images/20210726/134b6df53688433c8417c330a7d67307.png