Check and uncheck boxes in JavaScript

Question

I have a script that checks and check all boxes in a form, my problem is that I only want it to affect only my checkboxes but it also affecting my radio buttons.

This is my JavaScript:

<script>    
checked=false;
function checkedAll (frm1) {
    var aa= document.getElementById('frm1');
     if (checked == false)
          {
           checked = true
          }
        else
          {
          checked = false
          }
    for (var i =0; i < aa.elements.length; i++) 
    {
     aa.elements[i].checked = checked;
    }
      }
</script>

This is my html:

<form id ="frm1">
<input type="checkbox" name="chk1">
<input type="radio" name="chk1">
<input type="checkbox" name="chk2">
<input type='checkbox' name='checkall' onclick='checkedAll(frm1);'>
</form>

I was wondering whether there was a way to check only the checkboxes not the radio button?

You can simplify the if-else by replacing it with one line: checked = !checked; — Philippe Leybaert
– Philippe Leybaert, Commented Aug 16, 2012 at 18:40

Elias Zamaria · Accepted Answer · 2012-08-16 18:38:58Z

3

for (var i =0; i < aa.elements.length; i++) 
{
    if (aa.elements[i].type == "checkbox") {
        aa.elements[i].checked = checked;
    }
}

answered Aug 16, 2012 at 18:38

Elias Zamaria

102k34 gold badges122 silver badges152 bronze badges

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

Comments

Scorpion-Prince · Accepted Answer · 2012-08-16 18:42:39Z

0

You can loop through the form elements and check for the "type" property. Alternately, you can use a javascript library like jQuery, which makes it easier to select elements of certain type.

var elLength = document.MyForm.elements.length;

for (i=0; i<elLength; i++)
{
    var type = MyForm.elements[i].type;
    if (type=="checkbox" && MyForm.elements[i].checked){
        alert("Form element in position " + i + " is of type checkbox and is checked.");
    }
    else if (type=="checkbox") {
        alert("Form element in position " + i + " is of type checkbox and is not checked.");
    }
    else {
    }
}

In jQuery it would be:

$("input[type='checkbox']).each(function(chk) {
    chk.checked = !chk.checked;
});

answered Aug 16, 2012 at 18:42

Scorpion-Prince

3,6443 gold badges21 silver badges24 bronze badges

2 Comments

Dariush Jafari Over a year ago

chk.checked does not work. use this.checked = !this.checked

Scorpion-Prince Over a year ago

Yup.. I should have put $(chk).checked = !$(chk).checked ... good catch

Dariush Jafari · Accepted Answer · 2012-08-16 19:20:48Z

0

You can use jquery. use the html code below in your editor. it works correctly!

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.js">    </script>
</head>
    <form id="myform">  
       <input type="checkbox" />chk1  
       <input type="checkbox" />chk2<br/>    
       <input type="radio" />radio1<br/>       
       <a style="cursor:pointer" onclick="ch()">check/uncheck</a>
    </form>
</body></html>

and this script:

 <script>
    function ch(){
        $("form#myform input[type='checkbox']").each(function(chk) {
            this.checked = !this.checked;
        });        
    }
 </script>

edited Aug 16, 2012 at 19:20

answered Aug 16, 2012 at 19:00

Dariush Jafari

5,4538 gold badges45 silver badges74 bronze badges

Collectives™ on Stack Overflow

Check and uncheck boxes in JavaScript

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related