JavaScript - Toggle "check alle" Kontrollkästchen true/false

Question

Ich versuche, "Toggle-Kontrollkästchen" -Funktion, wie weiter unten zu machen:

HTML-Code:

<!-- "Check all" box --> 
<input type="checkbox" name="check" id="cbx_00_00" onclick="selectbox(this.getAttribute('id'));" /> 
<!-- the other ones --> 
<input type="checkbox" name="check" id="cbx_00_01" /> 
<input type="checkbox" name="check" id="cbx_00_02" /> 
<input type="checkbox" name="check" id="cbx_00_03" /> 

JavaScript:

function selectbox(eID) { 

    // instead of writing the element id in the html code, 
    // i want to use "this.getAttribute('id')" 
    var c = document.getElementById(eID); 

    // now when we've got the id of the element, 
    // let's get the required attribute. 
    var box = c.getAttribute('name'); 

    // set var i value to 0, in order to run "for i" loop 
    var i = 0; 

    for(i; i < box.length; i++) { 

     // now lets find if the main box (as box[0]) checked. 
     // if returns true (it has been checked), then check all - else - 
     // do not check 'em all. 
     if(box[0].checked == true) { 

      box[i].checked = true; 

     } 
     else { 

      box[i].checked = false; 

     } 

    } 

} 

Ich möchte keine jQuery-Lösung (auch wenn es einfacher sein kann als pure js), also bitte vermeiden Sie es zu empfehlen. Alles was ich wissen will ist - Wenn ich falsch liege - was denkst du sollte ich tun um das zu lösen? Vielen Dank. Jeder Vorschlag/Tipp wird geschätzt.

Answer 1

Ihr Problem scheint hauptsächlich zu sein, dass Sie über den Namen des Kontrollkästchens iterieren, nicht die Kontrollkästchen mit diesen Namen.

var box = c.getAttribute('name'); 

Nun ist box gleich "check", so box[0] ist "c", box[1] ist "h" usw.

Sie müssen dies hinzufügen:

var boxes = document.getElementsByName(box); 

und dann über boxes laufen.

Natürlich könnten Sie an dieser Stelle auch Ihre Variablen umbenennen.

Array.prototype.forEach.call(document.getElementsByName(box), function(el) { 
    el.checked = true; 
}); 

(Array.prototype.forEach.call wird über den „fake-Array“ in einer Schleife, die von getElementsByName weil die NodeList zurückgegeben:

Answer 2

den Namen in den Variablen box Da können Sie alle Felder mit dem gleichen Namen wie dies überprüfen Klasse hat nicht forEach.)

Ich denke, Sie können weiter einfach Ihren Code durch die ID des Elements an Ihre Funktion übergeben, aber direkt den Namen (selectbox(this.name)). Beachten Sie auch, dass Sie auf die ID und den Namen zugreifen können, indem Sie .id und .name statt getAttribute verwenden.

Answer 3

Sie können es einfach machen.

HTML-Code:

input type="checkbox" name="check" id="cbx_00_00" onclick="selectbox(this.getAttribute('name'));" />  
<input type="checkbox" name="check" id="cbx_00_01" /> 
<input type="checkbox" name="check" id="cbx_00_02" /> 
<input type="checkbox" name="check" id="cbx_00_03" /> 

Javascript:

function selectbox(eID) {  
     var checkBoxes = document.getElementsByName(eID); 

     for (var i = 0; i < checkBoxes .length; i++) { 
      if (checkBoxes[0].checked) { 
       checkBoxes[i].checked = true; 
      } 
      else { 
       checkBoxes[i].checked = false; 
      } 
     } 
    }