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

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>