全選,取消全選(字串拼接)
阿新 • • 發佈:2019-01-07
// 列表拼接 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); } }