首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >适用于所有人和单个人的CheckBox不能正常工作

适用于所有人和单个人的CheckBox不能正常工作
EN

Stack Overflow用户
提问于 2017-05-27 23:06:41
回答 1查看 32关注 0票数 0

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

代码语言:javascript
运行
复制
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

代码语言:javascript
运行
复制
$("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];
    }
}
});

索引

代码语言:javascript
运行
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
代码语言:javascript
运行
复制
<?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>
EN

回答 1

Stack Overflow用户

发布于 2017-05-27 23:16:44

JQuery .attr()方法与DOM元素的实际属性相关。但是,从JavaScript的角度来看,许多元素的DOM属性似乎与其对应的HTML属性相同,但事实并非如此,因为属性是在内存中更新的,而属性的更改会更新DOM。有时,有些属性甚至没有对应的属性(即select元素上的selectedIndex )。

重点是你有thess行:

代码语言:javascript
运行
复制
$("#"+lstId).attr("checked", true);

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

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

要解决此问题,请使用prop()方法而不是.attr()方法:

代码语言:javascript
运行
复制
$("#"+lstId).prop("checked", true);
$("#"+lstId).prop("checked", false);

有关详细信息以及特性和属性之间的比较,请参阅

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/44218395

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档