Question

我正在尝试重置所有附加的复选框以取消选中表单。但是当我编写新的javascript代码以取消选中所有复选框时。我的表单甚至不允许我添加这些复选框

我的html代码

    <h1>Add or reset all </h1>
    <hr>
    <br>
    <button type="button" id="btn" onclick="addItems">Add Item</button>

    <input type="text" id="texto">
     <ul id="ul"> </ul>

我的JavaScript代码：



    function addItem(){

    var ul = document.getElementById('ul'); //ul
    var li = document.createElement('li');//li

    var checkbox = document.createElement('input');
        checkbox.type = "checkbox";
        checkbox.value = 1;
        checkbox.name = "todo[]";

    li.appendChild(checkbox);

    var text = document.getElementById('texto');
    li.appendChild(document.createTextNode(text.value));
    ul.appendChild(li); 
    }

    var button = document.getElementById('btn');
    button.onclick = addItem;

当我添加此功能以使所有附加的复选框都取消选中时，它甚至不允许我将复选框添加到表单中


 <input type="button" onclick="uncheckAll2()" class="btn btn-link" value="Uncheck All">

和Javascript函数

 function uncheckAll2() 
  {
  var inputs = document.querySelectorAll('.check2');
  for(var i = 0; i < inputs.length; i++) {
  inputs[i].checked = false;
  }

可以解决吗？感谢高级。

Answer 1

问题出在document.querySelectorAll('.check2');上，没有复选框具有.check2类。尝试在添加新复选框的同时添加.check2类。

<h1>Add or reset all </h1>
<input type="button" onclick="uncheckAll2()" class="btn btn-link" value="Uncheck All">
<hr>
<br>
<button type="button" id="btn" onclick="addItems">Add Item</button>

<input type="text" id="texto">
<ul id="ul"> </ul>
<script>
    function addItem() {

        var ul = document.getElementById('ul'); //ul
        var li = document.createElement('li');//li

        var checkbox = document.createElement('input');
        checkbox.type = "checkbox";
        checkbox.value = 1;
        checkbox.name = "todo[]";
        checkbox.className = "check2";
        li.appendChild(checkbox);

        var text = document.getElementById('texto');
        li.appendChild(document.createTextNode(text.value));
        ul.appendChild(li);
    }

    var button = document.getElementById('btn');
    button.onclick = addItem;

    function uncheckAll2() {
        var inputs = document.querySelectorAll('.check2');
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].checked = false;
        }
    }
</script>

Answer 2

复选框没有任何类别。您可以添加类或使用document.querySelectorAll('input[name="todo[]"]')选择具有该名称的所有输入，然后迭代集合并将checked设置为false

function uncheckAll2() {
  var inputs = document.querySelectorAll('input[name="todo[]"]');
  for (var i = 0; i < inputs.length; i++) {
    inputs[i].checked = false;
  }
}
function addItem() {
  var ul = document.getElementById('ul'); //ul
  var li = document.createElement('li'); //li
  var checkbox = document.createElement('input');
  checkbox.type = "checkbox";
  checkbox.value = 1;
  checkbox.name = "todo[]";

  li.appendChild(checkbox);

  var text = document.getElementById('texto');
  li.appendChild(document.createTextNode(text.value));
  ul.appendChild(li);
}

var button = document.getElementById('btn');
button.onclick = addItem;

<h1>Add or reset all </h1>
<hr>
<br>
<button type="button" id="btn" onclick="addItems">Add Item</button>

<input type="text" id="texto">
<ul id="ul"> </ul>
<input type="button" onclick="uncheckAll2()" class="btn btn-link" value="Uncheck All">

Answer 3

function addItem(){
//console.log('adding');

var ul = document.getElementById('ul'); //ul
var li = document.createElement('li');//li

var checkbox = document.createElement('input');
    checkbox.type = "checkbox";
    checkbox.value = 1;
    checkbox.name = "todo[]";

li.appendChild(checkbox);

var text = document.getElementById('texto');
li.appendChild(document.createTextNode(text.value));
ul.appendChild(li); 
}

var add_button = document.getElementById('add-btn');
add_button.onclick = addItem;


 function uncheckAll2() 
  {
   $(':checkbox').each(function() {
 this.checked = false;
 });

}

  var rem_button = document.getElementById('remove-btn');
rem_button.onclick = uncheckAll2;

HTML

 <h1>Add or reset all </h1>
 <hr>
 <br>
<button type="button" id="add-btn" onclick="addItems">Add Item</button>

<input type="text" id="texto">
 <ul id="ul"> </ul>

无法将所有复选框重置为未选中的javascript

3 个答案: