Question

我只是想根据选中的复选框动态添加到表单中的div。因此，我正在创建li标记，然后将它们添加为li父元素中的ol元素，因此它只是一个值列表。我不知道我的代码有什么问题，如果取消选中相关的复选框，我不知道如何删除相应的值，当我取消选中然后重新检查复选框时，它会一遍又一遍地添加值。 / p>

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

看起来您正在向表单添加事件侦听器而不是输入元素本身。我不认为当表单中的输入元素发生更改时将触发change事件。（见：https://developer.mozilla.org/en-US/docs/Web/Events/change）

在您的事件监听器上，尝试自己定位输入元素。

Answer 2

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

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

将清空第一个或所有匹配（不确定），但不会删除它们。相反，你应该给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);
  }

或者您可以在每次更改时完全清除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);
  }

编辑：

正确的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 个答案: