純粋なjavascriptで配列から値を取り除く

Question

これは前にさまざまな方法で質問されているかもしれませんが、私はまだこの特定の状況に適した答えを見つける必要があります。 ）。これはクラスの割り当てなので、私はそれについて何もできません。

基本的には、クリックして関連付けられた値を配列に送信した後、再度クリックするとチェックボックスをオフにしてその値を削除するチェックボックスのリストを作成するように求められました。

このため、HTMLは

  <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> 

であると私は持って対応するJavaScriptは、これまで

// 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); 
} 

この形式は、基本的に別の割り当てのために、私の教科書で使用したものと同じであるが、これ何らかの理由で私にこのプロジェクトの本当にファンキーな結果を与えています。

1つは、配列に問題はありませんが、チェック、チェック解除、再度チェックした後に同じ値のコピーが複数追加されることがあります。

ボックスのチェックを外すときの削除は、動作することもありますが、しないこともあります。時には、現在のチェックボックスに関連した値とは全く異なる値が取り除かれることがあります。

私は、このforループのどこかに問題があると考えています。具体的には、その中のif文に問題があるかもしれません。しかし、ちょっとしたやり直しの後、私は問題を解決する方法をちょうつがいました（私はエラーがどこか他の場所にあるという点で全く間違っているかもしれません）。

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; 

    } 
} 

本当にありがとうございます。ここにはjsfiddleがあります。

Answer 1

あなたはこれを複雑にしました。ボックスがチェックされていて、値が配列にない場合はチェックし、配列にプッシュしない場合はインデックスに基づいて削除します。

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