CODEWITHSUNDEEP
javascriptjquery
Ninja Ninja
Ninja Ninja

Reputation: 25

Unable to reset all check box to unchecked in javascript

I am trying to reset all my appended checkbox to uncheck form. But When I wrote new javascript code to make all checkbox to uncheck.My form does not allow me to even add these checkboxes

My html code

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

My javascript code :



    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;

When I add this function to make the all appended checked boxes to uncheck it did not even allow me to add the checkboxes into my form


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

And Javascript function

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

Can you fix it out? Thanks in Adv.

Upvotes: 1

Views: 336

Answers (3)

amchugh89
amchugh89

Reputation: 1306

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>

Upvotes: 0

D Mishra
D Mishra

Reputation: 1578

The problem is with document.querySelectorAll('.check2'); No check box has .check2 class. Try to add class .check2 while adding new checkbox.

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

Upvotes: 2

brk
brk

Reputation: 50346

The checkboxes does not have any class. You can add class or use document.querySelectorAll('input[name="todo[]"]') to select all input with this name and then iterate the collection and set checked to 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">

Upvotes: 0

Related Questions