Entfernen eines Wertes von Array mit reinem Javascript

Question

Ich weiß, dass dies zuvor auf verschiedene Arten gefragt worden ist, aber ich habe noch eine Antwort finden, die für diese besondere Situation geeignet ist, da es in JS geschrieben werden muss (keine jQuery). Dies ist eine Klassenaufgabe, also kann ich nichts dagegen tun.

Grundsätzlich wurde ich gebeten, eine Liste mit Kontrollkästchen zu erstellen, die beim Klicken den zugehörigen Wert an ein Array senden. Wenn Sie dann erneut darauf klicken, um das Kontrollkästchen zu deaktivieren, sollte der Wert entfernt werden.

Der HTML-Code für diese ist

  <div> 
       <fieldset class="checks"> 
       <legend><span>What are your favorite JavaScript libraries/frameworks?</span></legend> 
       <input type="checkbox" id="jq" value="jQuery" name="libraries" /> 
       <label for="jq" id="jqLabel">jQuery</label> 
       <input type="checkbox" id="angular" value="AngularJS" name="libraries" /> 
       <label for="angular" id="angularLabel">AngularJS</label> 
       <input type="checkbox" id="node" value="NodeJS" name="libraries" /> 
       <label for="node" id="nodeLabel">NodeJS</label> 
       <input type="checkbox" id="react" value="ReactJS" name="libraries" /> 
       <label for="react" id="reactLabel">ReactJS</label> 
       <input type="checkbox" id="backbone" value="Backbone" name="libraries" /> 
       <label for="backbone" id="backboneLabel">Backbone</label> 
      </fieldset> 
      </div> 

      <p id="testPara"></p> 

und die entsprechenden Javascript I ist so weit haben

// Function for JS library selections 
var libraryArray = []; 

function libraryQuery(event) { 

    if (event === undefined) { // get caller element in IE8 
     event = window.event; 
    } 

    var callerElement = event.target || event.srcElement; 
    var libraryName = callerElement.value; 
    if (callerElement.checked) { 
    libraryArray.push(libraryName); 
    document.getElementById("testPara").innerHTML = libraryArray; 
    } 
    else { 
    var listItems = document.querySelectorAll(".checks input"); 

    for (var i = 0; i < libraryArray.length; i++) { 
     if (listItems[i].value === libraryName) { 
     // remove element at index i from array 
      libraryArray.splice(i, 1); 
      document.getElementById("testPara").innerHTML = libraryArray; 

     } 
    } 
    } 
} 

function createEventListeners() { 
    var libraries = document.getElementsByName("libraries"); 
    if (libraries[0].addEventListener) { 
    for (var i = 0; i < libraries.length; i++) { 
     libraries[i].addEventListener("change", libraryQuery, false); 
    } 
    } else if (libraries[0].attachEvent) { 
    for (var i = 0; i < libraries.length; i++) { 
     libraries[i].attachEvent("onchange", libraryQuery); 
    } 
    } 

} 

if (window.addEventListener) { 
    window.addEventListener("load", createEventListeners, false); 
} else if (window.attachEvent) { 
    window.attachEvent("onload", createEventListeners); 
} 

Dieses Format ist im Grunde das gleiche wie das, was für eine andere Zuordnung in meinem Lehrbuch verwendet wurde, die arbeitet dort, aber aus irgendeinem Grund gibt mir wirklich funky Ergebnisse zu diesem Projekt.

Zum einen wird es zu dem Array kein Problem hinzufügen, aber manchmal wird es mehrere Kopien des gleichen Werts nach dem Prüfen, Abwählen und dann erneut überprüfen, was nicht gut ist.

Wie für die Entfernung beim Deaktivieren von Boxen, manchmal funktioniert es, manchmal nicht. Manchmal entfernt es einen völlig anderen Wert als den, der mit dem aktuellen Kontrollkästchen verknüpft ist.

Ich glaube, das Problem irgendwo in dieser for-Schleife zu sein, und genauer gesagt kann es ein Problem mit der if-Anweisung darin sein. Aber nach einer Menge Bastelei bin ich nur ratlos, wie ich das Problem beheben kann (ich könnte auch völlig falsch darin liegen, dass der Fehler irgendwo anders ist).

for (var i = 0; i < libraryArray.length; i++) { 
    if (listItems[i].value === libraryName) { 
    // remove element at index i from array 
     libraryArray.splice(i, 1); 
     document.getElementById("testPara").innerHTML = libraryArray; 

    } 
} 

Jede Hilfe wird wirklich geschätzt. Hier ist ein jsfiddle.

Answer 1

Sie haben dies kompliziert, alles, was Sie tun müssen, ist zu überprüfen, ob das Kontrollkästchen aktiviert ist, und der Wert ist nicht bereits im Array, dann schieben Sie es auf das Array, ansonsten entfernen Sie es nur basierend auf dem Index.

function libraryQuery() { 
    var libraryName = this.value, 
     index  = libraryArray.indexOf(libraryName); 

    if (this.checked && index === -1) { 
     libraryArray.push(libraryName); 
    } else { 
     libraryArray.splice(index, 1); 
    } 
    document.getElementById("testPara").innerHTML = libraryArray; 
} 

FIDDLE