CheckBox for all 和 for single 无法正常工作

Question

我正在尝试使用复选框函数创建一个列表数组，该函数检查是否单击了所有复选框，然后将所有列表放入数组中，如果单击取消选中它会拉出所有数组值，如果单个列表被检查它添加到数组中，如果它没有被检查，当它的单个或所有列表值被取出时，它的值从数组中被取出。然而，在第一次运行时，如果全部选中，我无法通过选中一个复选框来删除单个值，并且毕竟选中和未选中我无法通过选中单个选项将单个值添加到数组中。

var lstsToEdit = [];

lstDisplay("act");

$(".tab-listings-selection").on("click", function() {
    var lstType;
    if(this.id == "mnLstAct") lstType = "act";
    if(this.id == "mnLstInact") lstType = "inact";
    if(this.id == "mnLstDraft") lstType = "draft";
    document.getElementById("mnLstAct").style.fontWeight = "normal";
    document.getElementById("mnLstInact").style.fontWeight = "normal";
    document.getElementById("mnLstDraft").style.fontWeight = "normal";
    this.style.fontWeight = "bold";
    lstDisplay(lstType);
});

function lstDisplay(type){  
    document.getElementById("main").innerHTML = "";

var tblLsts = document.createElement("table");
tblLsts.setAttribute("id", "tblLsts");
$("#main").append(tblLsts);
var tblLstsHRow = tblLsts.insertRow(0);
var tblLstsHThumb = tblLstsHRow.insertCell(0);
var tblLstsHTitle = tblLstsHRow.insertCell(1);
var tblLstsHStock = tblLstsHRow.insertCell(2);
var tblLstsHPrice = tblLstsHRow.insertCell(3);
var tblLstsHExpiry = tblLstsHRow.insertCell(4);
var tblLstsHSection = tblLstsHRow.insertCell(5);
var tblLstsHAll = tblLstsHRow.insertCell(6);
tblLstsHThumb.outerHTML = "<th></th>";
tblLstsHTitle.outerHTML = "<th>Title</th>";
tblLstsHStock.outerHTML = "<th>In Stock</th>";
tblLstsHPrice.outerHTML = "<th>Price</th>";
tblLstsHExpiry.outerHTML = "<th>Expiry</th>";
tblLstsHSection.outerHTML = "<th>Section</th>";
tblLstsHAll.outerHTML = "<th>All<input id=\"lstsAllChk\" class=\"lstChk\" type=\"checkbox\"/></th>";   
var lstThumb = [];  
var listings;

if (type == "act") lsts = lstAct;
if (type == "inact") lsts = lstInact;
if (type == "draft") lsts = lstDraft;
for (var lstIndex = 1; lstIndex < lsts.results.length+1; lstIndex++){
    var lst = lsts.results[lstIndex-1];         
    var row = document.getElementById("tblLsts").insertRow(lstIndex);
    var colThumb = row.insertCell(0);
    var colTitle = row.insertCell(1);
    var colStock = row.insertCell(2);
    var colPrice = row.insertCell(3);
    var colExpiry = row.insertCell(4);
    var colSection = row.insertCell(5);
    var colSelect = row.insertCell(6);          
    var lstJ = JSON.parse($.ajax({url: "listings/" + lst.listing_id + ".json", async: false}).responseText);
    colThumb.innerHTML = "<img src=\"" + lstJ.results[0].url_75x75 +"\">";
    colTitle.innerHTML = lst.title;
    colStock.innerHTML = lst.quantity;
    colPrice.innerHTML = lst.price;
    colSelect.innerHTML = "<input id=\"" + lst.listing_id + "\" class=\"lstChk\" type=\"checkbox\"/>";

    for (var secIndex = 0; secIndex < sects.results.length; secIndex++){
        if (sects.results[secIndex].shop_section_id == lst.shop_section_id)
            colSection.innerHTML = sects.results[secIndex].title;
    }           
}

$.getScript("tableSort.js");    
}

$(".lstChk").on("click", function() {
    if(this.id == "lstsAllChk" && this.checked){
        for(var lstIndex = 0; lstIndex < document.querySelectorAll(".lstChk").length; lstIndex++){
            var lstId = document.querySelectorAll(".lstChk")[lstIndex].id;
            //if(lstsToEdit.findIndex( function(value){ value == lstId;}) == -1){;
                $("#"+lstId).prop("checked");
                lstsToEdit.push(lstId);
            //}
        }
    }
    else if(this.id == "lstsAllChk" && !this.checked){
        for(var lstIndex = 0; lstIndex < document.querySelectorAll(".lstChk").length; lstIndex++){
            var lstId = document.querySelectorAll(".lstChk")[lstIndex].id;
            $("#"+lstId).prop("checked", false);
            var index = lstsToEdit.findIndex( function(value){ value == lstId;});
            lstsToEdit.splice(index, 1);
        }
    }
    else if(this.checked) lstsToEdit.push(this.id);
    else {
        var index = lstsToEdit.findIndex( function(value){ value == this.id;});
        lstsToEdit.splice(index, 1);
    }

if(lstsToEdit.length > 0) document.getElementById("lstEdit").style.display = "block";
else document.getElementById("lstEdit").style.display = "none";
console.log(lstsToEdit);
});

表格排序js

$("th").on("click", function() {
var table = this.closest("table");
var selection = $(this).text();
var col = this.cellIndex;
var tbl = [];
var order = [];

for (var rowIndex = 0; rowIndex < table.rows.length; rowIndex++){
    if (rowIndex > 0){
        tbl.push([]);
        for (var colIndex = 0; colIndex < table.rows[rowIndex].cells.length; colIndex++){
            tbl[rowIndex-1].push(table.rows[rowIndex].cells[colIndex].innerHTML);
            if (colIndex == col){
                order.push([]);
                order[rowIndex-1].push(tbl[rowIndex-1][colIndex]);
                order[rowIndex-1].push(rowIndex-1);
            }
        }
    }           
}

for (var rowIndex = table.rows.length-1; rowIndex > 0; rowIndex--){
    table.deleteRow(rowIndex);
}

var reA = /[^a-zA-Z]/g;
var reN = /[^0-9]/g
order.sort (function (a,b){
    var aA = a[0].replace(reA, "").toLowerCase();
    var bA = b[0].replace(reA, "").toLowerCase();
    if(aA == bA) {
        var aN = parseInt(a[0].replace(reN, ""), 10);
        var bN = parseInt(b[0].replace(reN, ""), 10);
        return aN == bN ? 0 : aN > bN ? 1 : -1;
    } else {
        return aA > bA ? 1 : -1;
    };
});

for (var orderIndex = 0; orderIndex < order.length; orderIndex++){
    var row = table.insertRow(orderIndex + 1);
    for (var colIndex = 0; colIndex < tbl[orderIndex].length; colIndex++){
        var cell = row.insertCell(colIndex);
        var index = order[orderIndex][1];
        cell.innerHTML = tbl[index][colIndex];
    }
}
});

索引

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<?php 
include 'menu.php';
                    include 'shopJson.php';
                ?>
                <div id="lstEdit">edit</div>
                <div id="main"></div>
            </body>
        </html>
        <script>
            var lstActURL = "listings/active.json";
            var lstInactURL = "listings/inactive.json";
            var lstDraftURL = "listings/draft.json";
            var sectURL = "listings/sect.json";
            var lstAct = JSON.parse($.ajax({url: lstActURL, async: false}).responseText);
            var lstInact = JSON.parse($.ajax({url: lstInactURL, async: false}).responseText);
            var lstDraft = JSON.parse($.ajax({url: lstInactURL, async: false}).responseText);
            var sects = JSON.parse($.ajax({url: sectURL, async: false}).responseText);
            $("#mnLstAct").append("(" + lstAct.results.length + ")");
            $("#mnLstInact").append("(" + lstInact.results.length + ")");
            $("#mnLstDraft").append("(" + lstDraft.results.length + ")");
            document.getElementById("mnLstAct").style.fontWeight = "bold";
            $.getScript("listings.js"); 
        </script>

Answer 1

JQuery .attr() 方法与 DOM 元素的实际属性相关。但是，从 JavaScript 的角度来看，许多元素的 DOM 属性看起来与它们的 HTML 属性对应物相同，但这并不是因为属性在内存中更新，而属性更改会更新 DOM。有时，有些属性甚至没有对应的属性（即 select 元素上的 selectedIndex）。

关键是你有主线：

$("#"+lstId).attr("checked", true);

$("#"+lstId).attr("checked", false);

您试图强制检查某个元素的位置，但这可能与您检查checked 属性时得到的结果无关。

为了解决这个问题，请使用prop() 方法而不是.attr() 方法：

$("#"+lstId).prop("checked", true);
$("#"+lstId).prop("checked", false);

请参阅 documentation for .prop() 了解详细信息以及属性和属性之间的比较。