根据DOM的复选框值动态添加和删除元素

Question

I'm just trying to dynamically add to a div within a form depending on which checkboxes are checked. 我只是想根据选中的复选框在表单中动态添加到div中。 So, I am creating the li tag and then they are added as li elements within an ol parent element so its just a list of values. 因此，我创建了li标签，然后将它们作为li元素添加到ol父元素中，因此它只是一个值列表。 I do not know what is wrong with my code, I'm not sure how to remove the appropriate value if the relevant checkbox is unchecked, and when I uncheck and then recheck a checkbox, it keeps adding the value over and over again. 我不知道我的代码有什么问题，如果不确定相关的复选框，我不确定如何删除适当的值，并且当我取消选中然后重新选中一个复选框时，它会不断地反复添加该值。

 <!DOCTYPE html> <html> <head> <title></title> <style> input { margin: 18px; } #o { list-style-type: none; } .u { list-style: none; } </style> </head> <body style="width: 700px"> <div style="float: left; width: 340px; height: 250px; border: 1px solid black; padding: 20px 0 10px 20px;"> <form id="myForm"> <ul class="u"> <li><input id="showAlert1" type="checkbox" name="thing" value="laptop">laptop</li> <li><input id="showAlert2" type="checkbox" name="thing" value="iphone">iphone</li> </ul> </form> </div> <div id="myDiv" style="float: right; width: 317px; height: 250px; border: solid black; border-width: 1px 1px 1px 0; padding: 20px 0 10px 20px;"> <ol id="o"> </ol> </div> <script> document.getElementById('myForm').addEventListener('change', function () { var a = document.getElementsByName('thing'); for (var i = 0; i < a.length; i++) { if (a[i].checked){ createDynamicElement(); } else if (!a[i].checked){ removeDynamicElement(); } } function createDynamicElement(){ var node = document.createElement("LI"); node.setAttribute("id1", "Hey"); var textnode = document.createTextNode(event.target.nextSibling.data); node.appendChild(textnode); document.getElementById("o").appendChild(node); } function removeDynamicElement() { document.querySelector("#o li").innerHTML = ""; } }); </script> </body> </html>

Answer 1

It looks like that you are adding an event listener to the form instead of the input elements themselves. 看起来您正在向表单中添加事件侦听器，而不是输入元素本身。 I dont think the change event will be fired when an input element in a form changes. 我不认为当表单中的输入元素更改时，将触发更改事件。 (see: https://developer.mozilla.org/en-US/docs/Web/Events/change ) （请参阅： https : //developer.mozilla.org/en-US/docs/Web/Events/change ）

On your event listener, try targeting the input elements themselves. 在事件侦听器上，尝试将输入元素本身作为目标。

Answer 2

} else if (!a[i].checked){
      removeDynamicElement();
}

...
function removeDynamicElement() {
    document.querySelector("#o li").innerHTML = "";
}

Will empty the first or all matches(not sure) but wont remove them. 将清空第一个或所有匹配项（不确定），但不会将其删除。 Instead you should give li tags a unique ID and remove them completely via something like: 相反，您应该给li标签一个唯一的ID，并通过以下方式将其完全删除：

for (var i = 0; i < a.length; i++) {
  if (a[i].checked){
      console.log(a[i])
      createDynamicElement(a[i].value);
  } else if (!a[i].checked){
      removeDynamicElement(a[i].value);
  }
}

  function createDynamicElement(id){
      var node = document.createElement("LI");
      node.setAttribute("id", id);
      var textnode = document.createTextNode(id);
      node.appendChild(textnode);
      console.log(node)
      document.getElementById("o").appendChild(node);
  }
  function removeDynamicElement(id) {
    var target = document.getElementById(id)
    target.parentElement.removeChild(target);
  }

Or you could clear the ol completely on every change and repopulate it again like: 或者您可以在每次更改时完全清除ol，然后再次填充它，例如：

var a = document.getElementsByName('thing');
document.getElementById("o").innerHTML = null;

for (var i = 0; i < a.length; i++) {
  if (a[i].checked){
      console.log(a[i])
      createDynamicElement(a[i].value);
  }
}

  function createDynamicElement(id){
      var node = document.createElement("LI");
      var textnode = document.createTextNode(id);
      node.appendChild(textnode);
      console.log(node)
      document.getElementById("o").appendChild(node);
  }

Edit: 编辑：

A proper FIFO solution: 适当的FIFO解决方案：

var a = document.getElementsByName('thing');

for (var i = 0; i < 2; i++) {
  var target = document.getElementById(a[i].value);
  if (a[i].checked && !target){
      createDynamicElement(a[i].value);
  } else if ((!a[i].checked) && target){
      removeDynamicElement(a[i].value);
  }
}

  function createDynamicElement(id){

      var node = document.createElement("li");
      node.setAttribute("id", id);
      var textnode = document.createTextNode(id);
      node.appendChild(textnode);
      document.getElementById("o").appendChild(node);

      console.log("a")
  }
  function removeDynamicElement(id) {
    target.parentElement.removeChild(target);
  }

});

根据DOM的复选框值动态添加和删除元素

问题描述

2 个解决方案

解决方案1
0 2017-01-10 18:39:53

解决方案2
0 2017-01-10 19:09:09

根据DOM的复选框值动态添加和删除元素

问题描述

2 个解决方案

解决方案1 0 2017-01-10 18:39:53

解决方案2 0 2017-01-10 19:09:09

解决方案1
0 2017-01-10 18:39:53

解决方案2
0 2017-01-10 19:09:09