动态HTML复选框上的“全选”复选框
我有正在迭代的内容，然后从javascript obj数据输出到HTML。我正在尝试合并一个复选框，单击该复选框即可；将“全部选中”或“全部选中”我的其他复选框（这些其他复选框来自我的JavaScript代码，来自for循环迭代）。
尝试：
function checkAll(checkId){
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "checkbox" && inputs[i].id == checkId) {
if(inputs[i].checked == true) {
inputs[i].checked = false ;
} else if (inputs[i].checked == false ) {
inputs[i].checked = true ;
}
}
}
}
将JS obj数据转换为HTML内容：
var json =[{
"Name": "zips",
"Type": "Directory",
"DateModified": "6/14/2018 17:22:50",
"Size": "5 KB",
}, {
"Name": "presets",
"Type": "Directory",
"DateModified": "5/11/2018 7:32:10",
"Size": "2 KB",
}, {
"Name": "workflow",
"Type": "Directory",
"DateModified": "6/26/2018 10:29:59",
"Size": "6 KB",
},{
"Name": "software",
"Type": "Directory",
"DateModified": "3/16/2018 10:29:59",
"Size": "16 KB",
},{
"Name": "mmm_data",
"Type": "Directory",
"DateModified": "6/27/2018 1:19:29",
"Size": "3 KB",
},{
"Name": "jobs",
"Type": "Directory",
"DateModified": "4/27/2018 11:59:59",
"Size": "3 KB",
},
];
var string ="";
for (i in json) {
string +='<div class="row"><div class="col-md-15 col-sm-1"><input type="checkbox" name="chk[]"></div><div class="col-md-15 col-sm-4"><span class="folders">'+json[i].Name+'</span></div><div class="col-md-15 col-sm-3"><span class="directory">'+json[i].Type+'</span></div><div class="col-md-15 col-sm-3"><span class="date-stamp">'+json[i].DateModified+'</span></div><div class="col-md-15 col-sm-1"><span class="date-size">'+json[i].Size+'</span></div></div>';
};
document.getElementsByClassName('update-data')[0].innerHTML =string
静态HTML：
<div class="data-columns">
<div class="row" id="hd">
<div class="col-md-15 col-sm-1">
<input type="checkbox" onclick="checkAll('chk');" >
</div>
<div class="col-md-15 col-sm-4">
<div id="named" class="sr">Name</div>
</div>
<div class="col-md-15 col-sm-3">
<div id="type" class="sr">Type</div>
</div>
<div class="col-md-15 col-sm-3">
<span id="dated" class="sr">Date Modified</span>
</div>
<div class="col-md-15 col-sm-1">
<span id="size" class="sr">Size</span>
</div>
</div>
<div class="update-data">
</div>
</div>
3 个答案:
答案 0 :(得分：3)
您的迭代看起来基本上不错。但是，部分条件检查将检查输入是否具有特定的ID。 ID是唯一的，因此最多只能输入一个。如果删除该部分，您应该会很好。 此外，如果用户在选择“全选”按钮之前选择了一个或多个框，这将是个问题，因为所有此功能都将其翻转，因此他们已选中的所有框都将被取消。 d采取以下措施：
function checkAll(checked){ // pass true or false to check or uncheck all
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "checkbox") {
inputs[i].checked = checked;
// This way it won't flip flop them and will set them all to the same value which is passed into the function
}
}
}
总而言之，最大的问题是您正在检查条件ID，并且页面上只有一个元素可以具有该ID。
答案 1 :(得分：1)
在您的代码中，您正在使用inputs[i].id == checkId来过滤复选框。这意味着只有输入ID的复选框才会切换。但是，元素ID必须是唯一的，所以这行不通。
这就是我要做的：使用诸如toggleable之类的类，该类告诉您的脚本应该更改框。然后，在切换它们时，请在每个复选框上检查该类。您修改后的代码如下所示：
function checkAll(checkClass){
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "checkbox" && inputs[i].classlist.contains(checkClass)) {
if(inputs[i].checked == true) {
inputs[i].checked = false ;
} else if (inputs[i].checked == false ) {
inputs[i].checked = true ;
}
}
}
}
然后，您只需将相同的类添加到要实现的任何框中，然后将该类名传递给您的函数即可代替id。
答案 2 :(得分：1)
您的代码中存在一些问题：
- 您的第一个复选框没有“ chk” ID。我想应该。
- 您要传递复选框的ID，然后将每个复选框的ID与该ID进行比较。并且其他两个复选框都没有ID。因此，除了单击复选框以外，您没有选中/取消选中其他任何选项。
- 您正在检查第一个复选框，但是随后发生click事件的默认操作。并且第一个复选框未选中。
因此，在尝试维护您的逻辑和现有代码时，我通过以下方式对其进行了修复：
- 删除if中的
inputs[i].id == checkId条件 - 将“ chk” ID添加到第一个复选框
- 未选中/取消选中第一个复选框。将其保留为click事件的默认行为。为此，请添加一个如果不选中/取消选中“ chk”复选框。
完整的代码段（样式除外）：
function checkAll(checkId) {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].id != checkId) {
if (inputs[i].type == "checkbox") {
if (inputs[i].checked == true) {
inputs[i].checked = false;
} else if (inputs[i].checked == false) {
inputs[i].checked = true;
}
}
}
}
}
var json = [{
"Name": "zips",
"Type": "Directory",
"DateModified": "6/14/2018 17:22:50",
"Size": "5 KB",
}, {
"Name": "presets",
"Type": "Directory",
"DateModified": "5/11/2018 7:32:10",
"Size": "2 KB",
}, {
"Name": "workflow",
"Type": "Directory",
"DateModified": "6/26/2018 10:29:59",
"Size": "6 KB",
}, {
"Name": "software",
"Type": "Directory",
"DateModified": "3/16/2018 10:29:59",
"Size": "16 KB",
}, {
"Name": "mmm_data",
"Type": "Directory",
"DateModified": "6/27/2018 1:19:29",
"Size": "3 KB",
}, {
"Name": "jobs",
"Type": "Directory",
"DateModified": "4/27/2018 11:59:59",
"Size": "3 KB",
}, ];
var string = "";
for (i in json) {
string += '<div class="row"><div class="col-md-15 col-sm-1"><input type="checkbox" name="chk[]"></div><div class="col-md-15 col-sm-4"><span class="folders">' + json[i].Name + '</span></div><div class="col-md-15 col-sm-3"><span class="directory">' + json[i].Type + '</span></div><div class="col-md-15 col-sm-3"><span class="date-stamp">' + json[i].DateModified + '</span></div><div class="col-md-15 col-sm-1"><span class="date-size">' + json[i].Size + '</span></div></div>';
};
document.getElementsByClassName('update-data')[0].innerHTML = string;<div class="data-columns">
<div class="row" id="hd">
<div class="col-md-15 col-sm-1">
<input type="checkbox" id="chk" onclick="checkAll('chk')" ;>
</div>
<div class="col-md-15 col-sm-4">
<div id="named" class="sr">Name</div>
</div>
<div class="col-md-15 col-sm-3">
<div id="type" class="sr">Type</div>
</div>
<div class="col-md-15 col-sm-3">
<span id="dated" class="sr">Date Modified</span>
</div>
<div class="col-md-15 col-sm-1">
<span id="size" class="sr">Size</span>
</div>
</div>
<div class="update-data">
</div>
</div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？