Alle Kontrollkästchen markieren und eine Eingabe umschalten

Question

Ich benutze JQuery Vorlage und ich versuche, ein Kontrollkästchen alle auswählen. Im ursprünglichen Ajax-Aufruf füge ich jede ID der Klassifizierung zu einem Array hinzu. Verwenden Sie dann dieses Array, um jedes Kontrollkästchen auszuwählen.

Das Standardverhalten dieser Kontrollkästchen besteht darin, dass bei Auswahl jedes Kontrollkästchens ein Eingabefeld darunter angezeigt wird. Ich möchte es so, dass das Kontrollkästchen alle auswählen auch diese Eingaben schaltet. Das Problem besteht darin, dass nach dem Auswählen von selectAll jede Änderung etwa 5 Mal geöffnet und geschlossen wird.

Ich glaube, es hat etwas mit dem verschachtelten Forloop innerhalb meiner .ach-Methode zu tun, aber nicht ganz sicher.

Hier ist der Code:

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

bekommen alle Kontrollkästchen auf einmal ist viel einfacher als Sie

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

denken Und sie alle geprüft machen, ist auch einfach:

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

Und das gleichzeitige Einschalten der Anzeige eines zugeordneten Elements bedeutet, dass nur eine Zeile hinzugefügt wird:

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

Und schließlich, das alles zu einem "Select All" Binden-Taste:

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>