Question

我意识到之前可能会以不同的方式提出这个问题，但我还没有找到适合这种特殊情况的答案，因为它需要用简单的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是

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

这种格式与我的教科书中用于另一项任务的格式基本相同，但是由于某种原因，这个格式在这个项目上给我带来了非常时髦的结果。

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

至于取消选中框时的移除，有时它可以工作，有时则不然。有时它会删除与当前复选框未选中的值完全不同的值。

我认为这个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

使用纯javascript从数组中删除值

1 个答案: