选择所有复选框并切换输入

Question

我正在使用 JQuery 模板，我正在尝试添加一个全选复选框。在最初的 ajax 调用中，我将分类的每个 ID 添加到一个数组中。然后使用该数组来选择每个复选框。

这些复选框的默认行为是在选中时在每个复选框下方显示一个输入框。我想要它，以便全选复选框也可以切换这些输入。所以问题是在检查 selectAll 之后，它会打开和关闭每个切换大约 5 次。

我相信这与我的 .each 方法中的嵌套 forloop 有关，但不完全确定。

代码如下：

vendorClassifications = [];
$('#selectall')
        .click(function() {
            if (this.checked) {
                $('#step1data input:checkbox')
                    .each(function() {
                        this.checked = true;
                        for (var i = 0; i <= vendorClassifications.length; i++) {
                            if (vendorClassifications.hasOwnProperty(i)) {
                                $('#search_options_' + vendorClassifications[i]).toggle('blind');
                            }
                        }
                    });
            } else {
                $('#step1data input:checkbox')
                    .each(function() {
                        this.checked = false;
                        for (var i = 0; i <= vendorClassifications.length; i++) {
                            if (vendorClassifications.hasOwnProperty(i)) {
                                $('#search_options_' + i).toggle('blind');
                            }
                        }

                    });
            }
        });

Answer 1

一次获取所有复选框比您想象的要简单得多

// Gather up all the checkboxes
var boxes = document.querySelectorAll("input[type=checkbox]");

而且，将它们全部选中也很简单：

boxes.forEach(function(box){
   box.setAttribute("checked","checked");
});

而且，同时开启关联元素的显示意味着只添加一行：

boxes.forEach(function(box){
   box.setAttribute("checked","checked");
   box.nextElementSibling.style.display = "inline";
});

最后，将这一切与“全选”按钮联系起来：

window.addEventListener("DOMContentLoaded", function(){
  
    // Get the Select All button
    var btn = document.getElementById("btnSelect");
  
    // Gather up all the checkboxes
    var boxes = document.querySelectorAll("input[type=checkbox]");
  
    // Set up click handler for checkboxes
    boxes.forEach(function(box){
       box.addEventListener("change", function(){
         // Tie the checked property value to the display of the input next to it
         this.nextElementSibling.style.display = this.checked ? "inline" : "none" ;
       });
    });
  
    // Set up a click event handler for the button
    btn.addEventListener("click", function(){
      // that loops the checkboxes and sets them all to checked
      // and displays their neighbor
      boxes.forEach(function(box){
        box.checked = true;
        box.nextElementSibling.style.display = "inline";
      });  
    });
  
});

input[type="text"] {display:none;}

<input type="checkbox" value="box1"><input type="text">
<input type="checkbox" value="box2"><input type="text">
<input type="checkbox" value="box3"><input type="text">
<input type="checkbox" value="box4"><input type="text">

<button id="btnSelect">Select All</button>