CheckBox for all 和 for single 无法正常工作
Posted
技术标签:
【中文标题】CheckBox for all 和 for single 无法正常工作【英文标题】：CheckBox for all and for single does not work correctly 【发布时间】：2017-10-28 08:10:22 【问题描述】：我正在尝试使用复选框函数创建一个列表数组，该函数检查是否单击了所有复选框，然后将所有列表放入数组中，如果单击取消选中它会拉出所有数组值，如果单个列表被检查它添加到数组中，如果它没有被检查，当它的单个或所有列表值被取出时，它的值从数组中被取出。然而，在第一次运行时，如果全部选中，我无法通过选中一个复选框来删除单个值，并且毕竟选中和未选中我无法通过选中单个选项将单个值添加到数组中。
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>
【问题讨论】：
请贴出相关的HTML 在DOM中渲染节点后更新属性并不总是意味着相关属性也更新 （旁注）.getElementsByClassName() 具有性能影响，因为它返回“实时”节点列表。在每次循环迭代中使用它及其.length 属性会极大地拖累性能。考虑使用.querySelectorAll(".className") 并将length 缓存在一个变量中，然后将该变量用作循环的条件。
这个没有html，只有一个javascript，贴出来
lstAct, lstInact, and lstDraft 声明在哪里？
【参考方案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() 了解详细信息以及属性和属性之间的比较。
【讨论】：
prop 不接缝影响复选框的视觉检查或取消检查 @AndreiPak 正如我在 cmets 中所要求的，请发布 HTML，以便我们真正了解发生了什么。 刚刚发布了替换html的javascript @AndreiPak 我们需要更多。我们需要能够重现您的问题。lstsToEdit 在哪里声明？ tablesort.js 在哪里？ lstDisplay(type) 何时被调用以及传递给它的内容是什么？此外，必须有一些 HTML 作为所有这些的框架。我们也应该看到这一点。
html 差不多是
以上是关于CheckBox for all 和 for single 无法正常工作的主要内容，如果未能解决你的问题，请参考以下文章
w_all_checked - js -checkbox 多选全选submitrequest
$('.goods_tag_ids_all')[0].checked = true;//~~~~~ 单条改变checkbox 属性样式