Check all checkboxes with JavaScript

Question

I want to have the first checkbox that allows me to check or uncheck all of the other boxes. Here is the code I am using:

<html>
<head>
<script language="JavaScript">
function toggle(source) {
  checkboxes = document.getElementsById('checkall');
   for(var i in checkboxes)
     checkboxes[i].checked = source.checked;
 }
 </script> 
 </head>
 <body>
 <input type='checkbox' onClick='toggle(this)' /><br />
 <input type='checkbox' id='checkall' name='orders[0][order_id]' value='16885' /><br />
 <input type='checkbox' id='checkall' name='orders[1][order_id]' value='17006' /><br />
 <input type='checkbox' id='checkall' name='orders[2][order_id]' value='17006' /><br />
 <input type='checkbox' id='checkall' name='orders[3][order_id]' value='17007' /><br />
 <input type='checkbox' id='checkall' name='orders[4][order_id]' value='17011' /><br />
 </body>
 </html>

I believe there is a lot of questions like this one already... — Rémi Breton
– Rémi Breton, Commented Feb 29, 2012 at 3:28
I searched all over trying different examples and could get them to work, but now with the help of others it works perfectly. Thanks!! — Chris Edwards
– Chris Edwards, Commented Feb 29, 2012 at 18:01

Umbrella · Accepted Answer · 2012-02-29 03:28:59Z

This has worked for me.

function toggle(oInput) {
    var aInputs = document.getElementsByTagName('input');
    for (var i=0;i<aInputs.length;i++) {
        if (aInputs[i] != oInput) {
            aInputs[i].checked = oInput.checked;
        }
    }
}

Though, if you want to limit this to only certain checkboxes, add a classname to them, and to the master checkbox

<html>
<head>
<script type="text/javascript">
    function toggle(source) {
        var aInputs = document.getElementsByTagName('input');
        for (var i=0;i<aInputs.length;i++) {
            if (aInputs[i] != source && aInputs[i].className == source.className) {
                aInputs[i].checked = source.checked;
            }
        }
    }
 </script> 
 </head>
 <body>
 <input type='checkbox' class='checkall' onClick='toggle(this)' /><br />
 <input type='checkbox' class='checkall' name='orders[0][order_id]' value='16885' /><br />
 <input type='checkbox' class='checkall' name='orders[1][order_id]' value='17006' /><br />
 <input type='checkbox' class='checkall' name='orders[2][order_id]' value='17006' /><br />
 <input type='checkbox' class='checkall' name='orders[3][order_id]' value='17007' /><br />
 <input type='checkbox' class='checkall' name='orders[4][order_id]' value='17011' /><br />
 </body>
 </html>

R J · Accepted Answer · 2019-12-12 11:47:48Z

It's better to use the querySelectorAll. here is the example.

The Html with checkboxes

 <input type="button" value="Select All" onclick="selectAll()" id="TestAll" />

 <input type='checkbox' id='checkAll' name='Test1' />
 <input type='checkbox' id='checkall' name='Test2' />
 <input type='checkbox' id='checkAll' name='Test3' />
 <input type='checkbox' id='checkAll' name='Test4' />
 <input type='checkbox' id='checkAll' name='Test5' />

Here is the javascript for this

function selectAll() {
    var checkboxes = document.querySelectorAll('input[type="checkbox"]');
     for (var i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i].type == 'checkbox')
        checkboxes[i].checked = true;
     }
 }

Michael Berkowski · Accepted Answer · 2012-02-29 03:18:32Z

The problem is you are using the same id for all the checkbox groups. An id must be unique to a page. Instead you may use the checkbox name. Since the names have [] with varying values, you can use indexOf to examine just the first part.

<html>
<head>
<script language="JavaScript">
function toggle(source) {
  // Get all input elements
  var inputs = document.getElementsByTagName('input'); 
   // Loop over inputs to find the checkboxes whose name starts with `orders`
   for(var i =0; i<inputs.length; i++) {
     if (inputs[i].type == 'checkbox' && inputs[i].name.indexOf('orders') === 0) { 
       inputs[i].checked = source.checked;
     }
   }
 }
 </script> 
 </head>
 <body>
 <input type='checkbox' onClick='toggle(this)' /><br />
 <input type='checkbox' id='checkall' name='orders[0][order_id]' value='16885' /><br />
 <input type='checkbox' id='checkall' name='orders[1][order_id]' value='17006' /><br />
 <input type='checkbox' id='checkall' name='orders[2][order_id]' value='17006' /><br />
 <input type='checkbox' id='checkall' name='orders[3][order_id]' value='17007' /><br />
 <input type='checkbox' id='checkall' name='orders[4][order_id]' value='17011' /><br />
 </body>
 </html>

ruin3936 · Accepted Answer · 2018-05-24 00:12:57Z

1

Try this...

<form id="form_">
    <input type='checkbox' name='item1' value='16885' />
    <input type='checkbox' name='item1' value='17006' />
    <input type='checkbox' name='item1' value='17006' />
    <input type='checkbox' name='item1' value='17007' />
    <input type='checkbox' name='item1' value='17011' />
    <a href="javascript:;" id="select_all1"><br/>Select All</a>
    <a href="javascript:;" id="clear_all1"><br/>Clear All</a>
    <button id="btnRemove1"><br/>Remove</button>
</form>

<script>
$("#select_all1").click(function() {
    var item = document.getElementsByName("item1");
    for (var i=0; i < item.length; i++) {
        item[i].setAttribute("checked");
    }
});
$("#clear_all1").click(function() {
    var item = document.getElementsByName("item1");
    for (var i=0; i < item.length; i++) {
        if(item[i].checked) {
            item[i].removeAttribute("checked");
        } else {
            alert("Nothing to clear.");
            return false;
        }
    }
});
$("#btnRemove1").click(function() {
    var items = $('.item1').is(':checked');
    if(items) {
            window.location = "/contents?"+ $("form#form_").serialize();
    }
    else {
        alert("Nothing to remove.");
        return false;
    }
});
</script>

edited May 24, 2018 at 0:12

answered Jul 25, 2013 at 4:42

ruin3936

5554 silver badges13 bronze badges

1 Comment

Thirumalai murugan Over a year ago

dont use the < there is option in stack over flow to give the code learn that

Ry- · Accepted Answer · 2012-02-29 03:17:21Z

0

IDs are supposed to be unique - never have more than one HTML element with the same id, it's invalid. That's also why you have a problem - there is no such method as document.getElementsById, only document.getElementById. Instead, you could use classes. Here's how to solve your problem in pure JavaScript:

function toggle(source) {
    var inputs = document.getElementsByTagName('input');
    var i, input;

    for(i = 0; input = inputs[i]; i++) {
        if((' ' + input.className + ' ').indexOf(' checkall ') > -1) {
            input.checked = source.checked;
        }
    }
}

And change all your id="checkall"s to class="checkall".

Or you could use jQuery. It's great and does all things ;)

answered Feb 29, 2012 at 3:17

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

Comments

obenjiro · Accepted Answer · 2012-02-29 03:37:31Z

You can simply wrap all checkboxes that you nead itterate throu into the DIV and access to it's childNodes and use getElementById to access that DIV

<head> 
<script language="JavaScript"> 
function toggle(source) { 
  //use getElementById to access to DOM objects by ID
  var checkboxes = document.getElementById('checkall').childNodes; 
  var source = document.getElementById('source');
  //now just itterate throu all checkboxess that is in the 'checkall' DIV
  for(var i in checkboxes) {
     checkboxes[i].checked = source.checked; 
  }
} 
</script>  
</head> 
<body> 
<!--Give an ID to the source checkbox so we could access it from Javascript-->
<input id="source" type='checkbox' onClick='toggle(this)' /><br /> 

<!--Just wrap all checkboxes that you nead to itterate into the DIV-->
<div id="checkall">
<input type='checkbox' name='orders[0][order_id]' value='16885' /><br /> 
<input type='checkbox' name='orders[1][order_id]' value='17006' /><br /> 
<input type='checkbox' name='orders[2][order_id]' value='17006' /><br /> 
<input type='checkbox' name='orders[3][order_id]' value='17007' /><br /> 
<input type='checkbox' name='orders[4][order_id]' value='17011' /><br /> 
</div> 

</body> 
</html>

Collectives™ on Stack Overflow

Check all checkboxes with JavaScript

6 Answers 6

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related