Uncheck all checkbox on pageload using javascript

Question

I am using following code but it is not working. Tell me if any suggestion. I want all chekboxes unchecked when I load the page. I've got the following code but it doesn't work:

 window.onload = function abc() {
     document.getElementsByTagName('input')[0].focus();
 }

<tr>
    <td>
        <input type="checkbox" ID="cb1" value="29500" onclick="if(this.checked){ cbcheck(this) } else { cbuncheck(this)}" /> Laptop
    </td>
    <td>
        <a href="#" id="a1" onmouseover="showimage('a1','laptop1');"  >Show Image</a>
        <img src="Images/laptop.jpg" id="laptop1" alt="" style="display:none; width:150px; height:150px;" onmouseout="hideimage('a1','laptop1');" class="right"/>
    </td>
 </tr>
 <tr>
     <td>
          <input type="checkbox" ID="cb2" value="10500" onclick="if(this.checked){ cbcheck(this) } else { cbuncheck(this)}" /> Mobile
     </td>
     <td>
          <a href="#" id="a2" onmouseover="showimage('a2','mobile1');"  >Show Image</a>
          <img src="Images/mobile.jpg" id="mobile1" alt="" style="display:none; width:150px; height:150px;"   onmouseout="hideimage('a2','mobile1');" />
     </td>
</tr>

A. If you don't set them to be checked they would be unchecked by default. (Are you afraid of asp.net viewstate or something similar?) B.Focus wouldn't help. set checked to be false. This should also help. — JNF
– JNF, Commented Sep 11, 2012 at 6:37
@techie_28, maybe because you don't always need to use jQuery :) — Alexander
– Alexander, Commented Sep 11, 2012 at 6:42
With the code that you have written, your page should have all the checkboxes unchecked as default. — Sonal
– Sonal, Commented Sep 11, 2012 at 6:46
By the way why have you kept checkboxes checked?When the page is Initially loading up,Just keep them unchecked by default. — techie_28
– techie_28, Commented Sep 11, 2012 at 6:49

Talha · Accepted Answer · 2012-09-11 07:00:27Z

12

Call this function on your page load event

function UncheckAll(){ 
      var w = document.getElementsByTagName('input'); 
      for(var i = 0; i < w.length; i++){ 
        if(w[i].type=='checkbox'){ 
          w[i].checked = false; 
        }
      }
  }

edited Sep 11, 2012 at 7:00

answered Sep 11, 2012 at 6:41

Talha

19.3k8 gold badges53 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kkk Over a year ago

bit mistake in your code it must be if(w[i].type == "checkbox"). As per your code it converts all input tag into checkbox. textbox converts into checkbox when i load the page

Yograj Gupta · Accepted Answer · 2012-09-11 06:41:27Z

8

You should try

window.onload = function(){
   var checkboxes = document.getElementsByTagName("INPUT");

   for(var x=0; x<checkboxes.length; x++)
   {
      if(checkboxes[x].type == "checkbox")
      {
          checkboxes[x].checked = false;
      }
   }

}

and If you can use jQuery, you can try

$(function(){
    $('input[type=checkbox]').prop("checked", false);
});

answered Sep 11, 2012 at 6:41

Yograj Gupta

9,8673 gold badges31 silver badges50 bronze badges

Comments

rationalboss · Accepted Answer · 2012-09-11 06:41:02Z

6

I don't see your code attempting to uncheck the boxes. You are only trying to focus on an element.

window.onload = function abc() {
    document.getElementsByTagName('input')[0].focus();
    var a = document.getElementById('form_name').getElementsByTagName('input');
    for (var i=0;i<a.length;i++) {
        if (a[i].type == 'checkbox') a[i].checked = false;
    }
}

I also advise that you do try out JQuery. The above code would be just like this in JQuery:

$(document).ready(function(){
    $('#formID input[type=checkbox]').attr('checked',false);
});

answered Sep 11, 2012 at 6:41

rationalboss

5,3973 gold badges32 silver badges50 bronze badges

Comments

a guest · Accepted Answer · 2015-06-30 21:24:42Z

1

A new answer to showcase new technology. Vanilla JS now in 2015:

var list = document.querySelectorAll('input[type=checkbox]');
for (var item of list) {
    item.checked = false;
}

Compact one-line variation:

for(var i of document.querySelectorAll('[type=checkbox]')) { i.checked = false; }

This is straight out of NodeList MDN documentation examples. The list provided by querySelectorAll is a NodeList and the for...of loop is a new statement for iterating over property values, a part of 2015 ECMAScript 6 standard—See here for browser compatibility.

answered Jun 30, 2015 at 21:24

a guest

1312 silver badges4 bronze badges

Collectives™ on Stack Overflow

Uncheck all checkbox on pageload using javascript

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related