主页 / 问题 / 932563
Accepted
recile
Asked:2020-01-16 04:04:58 +0000 UTC2020-01-16 04:04:58 +0000 UTC

如何在javascript中添加复选框

  • 772

如何修复以便将 for 也添加到标签中，如果复选标记值得进一步编写事件，则会发生检查 

var inputText= document.getElementById("inputText");
var ButtonAdd= document.getElementById("ButtonAdd");
var list = document.getElementById('list');
var eledd= document.querySelectorAll('input[type=checkbox]');
var bRemove= document.getElementById("buttonRemove");
ButtonAdd.onclick = function(){
  var inputcheck = document.createElement("input");
  inputcheck.id="fff";
  inputcheck.type ="checkbox";

 var label1= document.createElement('label');


  label1.innerHTML=inputText.value;
  list.appendChild(inputcheck);
  list.appendChild(label1);

}

if (eledd.checked){
alert("1");
}
<ul id="list"></ul>
<input type="text" name="" id="inputText" > 
<button id="ButtonAdd">Add</button>
<button id="bRemove">Remove</button>

javascript

2 个回答

  1. var inputText = document.getElementById("inputText");
var ButtonAdd = document.getElementById("ButtonAdd");
var list = document.getElementById('list');

ButtonAdd.onclick = function() {
  var inputcheck = document.createElement("input");
  inputcheck.id = "fff";
  inputcheck.type = "checkbox";

  var label1 = document.createElement('label');
  label1.setAttribute("for", "fff");

  label1.innerHTML = inputText.value;
  list.appendChild(inputcheck);
  list.appendChild(label1);

  inputcheck.onclick = function(e) {
    if (this.checked)
      console.log("1");
  };
}
    <ul id="list"></ul>
<input type="text" name="" id="inputText">
<button id="ButtonAdd">Add</button>

    • 1
  2. Best Answer

    document.getElementById("ButtonAdd").addEventListener("click", function(e) {
  var inputText = document.getElementById("inputText");
  var list = document.getElementById('list');

  var check = document.createElement("input");
  check.type = "checkbox";
  check.addEventListener("click", function(e) {
    console.log(text.textContent);
  });

  var text = document.createElement("span");
  text.textContent = inputText.value;

  var label1 = document.createElement('label');

  label1.appendChild(check);
  label1.appendChild(text);
  list.appendChild(label1);
});

document.getElementById("ButtonRemove").addEventListener("click", function(e) {
  var checks = document.querySelectorAll("#list input[type=checkbox]:checked");
  checks.forEach(item => item.parentNode.parentNode.removeChild(item.parentNode));
});
    <ul id="list"></ul>
<input type="text" name="" id="inputText">
<button id="ButtonAdd">Add</button>
<button id="ButtonRemove">Remove</button>

    • 1

相关问题