Question

我想在用户点击复选框时添加和删除数组中的元素。然后将其打印到HTML文档。我之前通过在每次函数运行时清空数组来完成此操作但是我更喜欢删除项而不是清空数组并添加选中的项。

https://jsfiddle.net/Buleria28/zz0x6hgc/

 /*Object that includes array*/
information {
  letters[]
}

/*Function*/
function letter() {
  var checkbox = Array.from(document.getElementsByName("test")); //creates array from checkboxes

  for (var i = 0; i < checkbox.length; i++) {
    if (checkbox.checked) {
      information.letters.push(checkbox[i].value);
    } else {
     var sbVal = checkbox[i].value;
      if (information.letters.includes(sbVal) == true) {
        var j = indexOf(sbVal);
        information.letters.splice(j, 1);
      }
    }
  }

  var showAbc = information.letters.join(", "); //converts to string
  document.getElementById("displaylet").innerHTML = showAbc; //prints to HTML document
}

/*Event Listener*/
var box = document.getElementsByName("test");
if (box[0].addEventListener) {
  for (var i = 0; i < box.length; i++) {
    box[i].addEventListener("change", letter, false);
  }
} else if (box[0].attachEvent) {
  for (var i = 0; i < box.length; i++) {
    box[i].attachEvent("onchange", letter);
  }
}

HTML在这里：

<div>
<label><input type="checkbox" name="test" value="A">A</label>
<label><input type="checkbox" name="test" value="B">B</label>
<label><input type="checkbox" name="test" value="C">C</label>
<label><input type="checkbox" name="test" value="D">D</label>
</div>



<p id="displaylet"></p>

Answer 1

您的Javascript代码几乎没有问题。试试这个： https://jsfiddle.net/zz0x6hgc/4/

/*Object that includes array*/
var information = {
  letters: []
}

/*Function*/
function letter(ev) {
  if (ev.target.checked) {
    information.letters.push(ev.target.value);
  } else {
    var index = information.letters.indexOf(ev.target.value); 
    if (index !== -1){
      information.letters.splice(index, 1);
    }
  }

  var showAbc = information.letters.join(", "); //converts to string
  document.getElementById("displaylet").innerHTML = showAbc; //prints to HTML document
}

/*Event Listener*/
var box = document.getElementsByName("test");
if (box[0].addEventListener) {
  for (var i = 0; i < box.length; i++) {
    box[i].addEventListener("change", letter, false);
  }
} else if (box[0].attachEvent) {
  for (var i = 0; i < box.length; i++) {
    box[i].attachEvent("onchange", letter);
  }
}

Answer 2

以您提到的方式实现代码不是那么直接，需要大量检查，特别是如果您想以正确的顺序显示字母。如果此代码适合您，请告诉我。我添加了几行评论。

＆＃13;

/*Object that includes array*/
     var information = {
       letters: []
     }
     var boxes = document.getElementsByName("test");
     /* Array of Checkboxes */
     var boxesArr = Array.prototype.slice.call(boxes, 0);
     /*Function*/
     function letter(e) {
       /* Filter out the checboxes that aren't checked */
       var checkedBoxes = boxesArr.filter((checkbox) => {
         return checkbox.checked;
       });

       /* Create a new array with only the checkbox values or letters */
       information.letters = checkedBoxes.map((checkbox) => {
         return checkbox.value;
       })

       var showAbc = information.letters.join(", "); //converts to string
       document.getElementById("displaylet").innerHTML = showAbc; //prints to HTML document
     }

     /*Event Listener*/
     boxes.forEach((checkbox) => {
       if (checkbox.attachEvent) {
         checkbox.attachEvent("onchange", letter);
       } else {
         checkbox.addEventListener("change", letter, false);
       }
     })

＆＃13;

<div>
  <label>
    <input type="checkbox" name="test" value="A">A</label>
  <label>
    <input type="checkbox" name="test" value="B">B</label>
  <label>
    <input type="checkbox" name="test" value="C">C</label>
  <label>
    <input type="checkbox" name="test" value="D">D</label>
</div>
<div id="displaylet">

</div>

＆＃13;

Answer 3

我个人会在这种情况下使用散列集，因为您的代码会变得更简单。

我在您的JavaScript中进行了以下更改：

包含字母对象和toString方法的对象，用于返回所选字母。 letters属性将所选字母作为键和值。 toString方法返回所选字母的连接表示。

初始化函数只是为所有复选框注册'change'事件。如果选中复选框os复选框，则它将被添加到letters属性，否则将被删除。

var information = {
    letters: {},
    toString: function() {
        return Object.keys(this.letters).join(", ");
    }
};

/*Initialize*/
(function() {
    var boxes = document.getElementsByName("test");
    for (let box of boxes) {
        box.addEventListener("change", function() {
            if (this.checked)
                information.letters[this.value] = true;
            else delete information.letters[this.value];
            document.getElementById("displaylet").innerHTML = information.toString();
        });
    }
})();

Answer 4

看看这是否有帮助：

http://example.com/google_login/#id_token=ASDFASDFASDFASDF

/*Object that includes array*/
let information = {};
information['letters'] = [];

/*Function*/
function letter() {
  var checkbox = Array.from(document.getElementsByName("test")); //creates array from checkboxes

  for (var i = 0; i < checkbox.length; i++) {
    var sbVal = checkbox[i].value;

    if (checkbox[i].checked && information.letters.indexOf(sbVal) < 0) {
      information.letters.push(checkbox[i].value);
      continue;
    }

    if (checkbox[i].checked === false && information.letters.indexOf(sbVal) >= 0) {
      var j = information.letters.indexOf(sbVal);
      information.letters.splice(j, 1);
    }
  }

  var showAbc = information.letters.join(", "); //converts to string
  document.getElementById("displaylet").innerHTML = showAbc; //prints to HTML document
}

/*Event Listener*/
var box = document.getElementsByName("test");
if (box[0].addEventListener) {
  for (var i = 0; i < box.length; i++) {
    box[i].addEventListener("change", letter, false);
  }
} else if (box[0].attachEvent) {
  for (var i = 0; i < box.length; i++) {
    box[i].attachEvent("onchange", letter);
  }
}

Answer 5

您的代码中有很多更正，这里是updated fiddle。

没有输出的HTML：
```
<p id="displaylet"></p>
```

对象声明无效：

var information = { /*changed*/
    letters: [] /*changed*/
};

功能letter也经历了多次更改：

information.letters.length = 0; //clear all previous selection
var checkbox = document.getElementsByName("test"); /*changed*/

for (var i = 0; i < checkbox.length; i++) {
  if (checkbox[i].checked) { /*changed, missing [i] */
    information.letters.push(checkbox[i].value);
  }

从Array添加和删除复选框值

5 个答案: