使用纯javascript从数组中删除值

我意识到以前可能有人以不同的方式问过这个问题，但我还没有找到适合这种特殊情况的答案，因为它需要用纯JS（无jQuery）编写。这是一个课堂作业，所以我对此无能为力

基本上，我被要求制作一个复选框列表，当单击时，这些复选框将其关联的值发送到一个数组，然后当再次单击取消复选框时，它将删除所述值

这方面的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库/框架是什么？
jQuery
安格拉斯
NodeJS
反应
骨干

到目前为止，我使用的对应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);
}

//用于JS库选择的函数
var libraryArray=[]；
函数库查询（事件）{
如果（event==undefined）{//在IE8中获取调用者元素
event=window.event；
}
var callerement=event.target | | event.src元素；
var libraryName=callerement.value；
如果（Callerement.checked）{
libraryArray.push（libraryName）；
document.getElementById（“testPara”）.innerHTML=libraryArray；
}
否则{
var listItems=document.querySelectorAll（“.checks输入”）；
对于（var i=0；i

这个格式基本上和我在课本上的另一个作业中使用的格式是一样的，这个作业在那里有效，但是由于某种原因，这个项目给了我非常有趣的结果

首先，它将添加到数组中没有问题，但有时它会在检查、取消选中后添加相同值的多个副本，然后再次检查，这是不好的

至于取消复选框时的删除，有时有效，有时无效。有时，它会删除与当前复选框关联的值完全不同的值

我认为这个问题可能在for循环中的某个地方，更具体地说，它可能是for循环中if语句的问题。但是经过大量的修补之后，我在如何纠正这个问题上被难住了（我也可能完全错了，因为错误在其他地方）

for（变量i=0；i

---

非常感谢您的帮助。这是一个。

您已经把它复杂化了，您所需要做的就是检查该框是否被选中，并且该值不在数组中，然后将其推送到数组中，否则只需根据索引将其删除即可

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

---

您可以考虑创建一个单独的函数来添加和移除数组中的值，因此，在添加第一个值时，检查该值是否在数组中，如果是，不要再添加它。与删除类似：如果值不在数组中，请不要尝试删除它。因此，您也可以编写一个小的getIndex函数，或者为Array.prototype.indexOf创建一个polyfill。谢谢，这很有效。您是否注意到我的代码中有任何导致问题的明显错误？

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