1. 程式人生 > >全選,取消全選(字串拼接)

全選,取消全選(字串拼接)

 

// 列表拼接
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);
    }
}