动态 HTML 复选框上的“全选”复选框

Question

我有内容被迭代，然后从 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>

Answer 1

您的迭代看起来大多不错。但是，您的部分条件检查输入是否具有特定的 id。Id 是唯一的，因此最多只能到达一个输入。如果你删除那部分你应该很好。此外，如果用户在选择全选按钮之前选择了一个或多个框，这将是有问题的，因为此功能所做的只是翻转它们，因此他们已经选中的任何框都将被取消选中。我会做一些事情：

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。