JavaScript Function to Check\Uncheck all Checkboxes

09 February, 2012 by Tom Elliott

Check & Uncheck checkboxes in JavaScript

Here’s a useful Javascript function I recently coded to allow a list of checkboxes in a form to be selected or unselected. The CheckAll function takes in two parameters, the first is the form name and the second is a boolean value – true or false, true being to select all checkboxes and false to un-select all.

<script type="text/javascript" language="javascript">// <![CDATA[
function checkAll(formname, checktoggle)
{
  var checkboxes = new Array(); 
  checkboxes = document[formname].getElementsByTagName('input');

  for (var i=0; i<checkboxes.length; i++)  {
    if (checkboxes[i].type == 'checkbox')   {
      checkboxes[i].checked = checktoggle;
    }
  }
}
// ]]></script>

The function gets the array of checkboxes from the selected form from their HTML tag ‘input’ type. If there are other input types such as ‘radio’, the function loops through all the input fields in the form, selecting only those that are checkboxes.

To call the function, add the following javascript command to your check all and uncheck all text or image links:

<a onclick="javascript:checkAll('form3', true);" href="javascript:void();">check all</a>
<a onclick="javascript:checkAll('form3', false);" href="javascript:void();">uncheck all</a>

One of the advantages of using this method is that unlike some other similar functions, this check all works regardless of the name of the checkbox. There may be occasions for example where the checkbox name changes within a list, i.e. ‘checkbox1’, ‘checkbox2’ etc rather than ‘checkbox’ for the whole list.

The Javascript check all function has been tested for compatibility in IE8, IE9, Chrome & FireFox

JQuery Check & Uncheck checkboxes

If you prefer a jQuery check/uncheck function, the below code will achieve exactly the same as above. This code will target all checkboxes on a page using the $(“input:checkbox”) selector.

$(document).ready(function() {
  $('#check-all').click(function(){
    $("input:checkbox").attr('checked', true);
  });
  $('#uncheck-all').click(function(){
    $("input:checkbox").attr('checked', false);
  });
});

Rather than adding the check all function to the link itself, the jQuery version listens for when the ‘check all’ or ‘uncheck all’ link is clicked, which means these links will need an ID adding to them as below:

<a id="check-all" href="javascript:void(0);">check all</a>
<a id="uncheck-all" href="javascript:void(0);">uncheck all</a> 

If you wanted to target specific checkboxes instead of all checkboxes on the page, you could add a class to the input which allows you to check/uncheck the boxes by replacing the code $(“input:checkbox”).attr(‘checked’, true); with $(“.checkboxclass”).attr(‘checked’, true);



Check if any checkboxes are selected in jQuery »


19 Comments

  • Elye says:

    WOW!! helped me thanks!!!

  • Gerrit says:

    Remember to rename “form3” in the script, according your form-name!

  • MOBINA says:

    Wooow. Its worked for me. thanks for the code

  • sathish says:

    Its worked for me. thanks for this code 🙂

  • PHP Programmer Sabah says:

    Thank you. It works great for my online system I developed. Thanx again

  • Rehman says:

    worka !!!

  • Bruce says:

    This worked brilliantly! I spent two hours searching and tinkering before I found this.

  • ksz says:

    It’s a nice idea, but from what I see jquery function fails on this steps:
    1. click check all
    2. click uncheck all
    3. try to click check all once again – checkboxes are not checked.

  • Erica says:

    YES!! You just solved a huge problem I was having, thank you!!

  • Chris says:

    Solved my problem too. Been racking my brains over this one!
    I split it into two functions, though – ‘select all’ and ‘select none’. Works perfectly.
    Thanks for posting this!

  • marc says:

    Hi,
    I try your code I have got one suggestion: when I click on select all, the value of checkbox are correctly checked (checked=”checked”); when I click on not select, it’s works too.
    But when I try click on to select one more time it dosent work ! Visually, the boxes are not checked (but script show the the checkbox are checked = checked=”checked”) .

    Why?

  • james says:

    I can get this to work OK, thanks but the problem I have is that each of the checkboxes in the list has their own two javascript events.

    onclick=”UpdateCost()” onChange=”RecUpdate()”

    Is there a way the Select All click can run these two javascript events on each checkbox?

  • ahyen says:

    Thanks! it’s working.

  • Petar says:

    First, tx for code it’s working great!
    But in console on each click I get a error ” Uncaught SyntaxError: Unexpected token ) ” and on right is: “(program):1 or VM732:1”
    Number after VM is adding +1 on next click and hovering on it gets me a debugger:///VM….:1

    Can someone explain why this error happend and what caused it or point me where I can read about it.

  • Dhwarakesh says:

    This stuff works fine, i have a different option.

    1. select any two checkboxes
    2. select another chcekbox then immediately the previous selected checkboxes needs to be unselected and currently selected checkbox need to be only selected.
    similar functionality spotted in gmail too.. can any one help me in this ???

    • Bharath Pateru says:

      Check All

      <%
      for(int i=0;i

      <input type='checkbox' class='checkbox' id='select_all_’ name=’check_delete’ value=’123′ onclick=’uncheckAll()’>

      function checkAll(ele) {
      var checkboxes = document.getElementsByName(‘check_delete’);
      if (ele.checked) {
      for (var i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i].type == 'checkbox') {
      checkboxes[i].checked = true;
      }
      }
      } else {
      for (var i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i].type == 'checkbox') {
      checkboxes[i].checked = false;
      }
      }
      }
      }

      function uncheckAll(uncheck)
      {
      var checkbox = document.getElementById('select_all_'+uncheck);
      var selectAll = document.getElementById('select_all');
      var checkboxes = document.getElementsByName('check_delete');

      var uncheckedCount = 0;
      var checkedCount=0;
      if(checkbox.checked == false)
      {
      selectAll.checked = false;
      }
      else if(checkbox.checked == true){

      for (var i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i].checked == true) {
      checkedCount = checkedCount + 1;
      }
      }

      }else{

      for (var i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i].checked == false) {
      uncheckedCount = uncheckedCount + 1;
      }
      }
      }

      var checkbox_size=checkboxes.length-1;
      if(parseInt(checkedCount) == parseInt(checkbox_size) ){
      selectAll.checked=true;
      }else if(parseInt(uncheckedCount) < parseInt(checkbox_size)){
      selectAll.checked=false;
      }

      }

  • ukey says:

    I have this little code:

    … and I don’t know how to make [b] = [a] * 9 only when the checkbox is checked. Otherwise, (the checkbox is unchecked), [b] = [a] * 0 = 0.
    So,
    – when the checkbox is checked, its value is 9
    – when the checkbox is unchecked, its value is 0

    I need it at my school.
    Thanks !

  • Rajashekhar Ijantakar says:

    Wahhw, helped me quickly. Thanks a lot

  • Leave a Reply

    Your email address will not be published. Required fields are marked *

    css.php