Как добавить checkbox на javascript

104
11 августа 2019, 07:50

Как исправить чтобы еще добавлялся for в lable и проверка происходила если галочка стоит что бы дальше написать событие

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>

Answer 1

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>

Answer 2

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>

READ ALSO
Удалить мусор из контента в div

Удалить мусор из контента в div

Прошлые менеджеры сайта вставляли в контент новости горизонтальную черту в виде ______________________________________________________________ (более 60 символов), которая...

98
Совмещение Java и frontend

Совмещение Java и frontend

Допустим, написал я на spring boote серверную часть, регистрацию пользователя, работа с базой данных и тдэто все у меня отображается через jsp

118
Scroll page window.screen.availHeight JS

Scroll page window.screen.availHeight JS

Подскажите кто знает, почему когда подгоняю в девтулзе(Хрома) высоту странички условно 600px, скролит коректно, а когда пытаюсь скролит в обычном...

115