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

Question

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

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。有时候，有些属性甚至没有属性对应物（即selectedIndex元素上的select。

关键是你有这些行：

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

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

您试图强制检查元素的位置，但这可能与您检查checked属性时获得的内容无关。

要说明这一点，请使用prop()方法代替.attr()方法：

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

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