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

---

---

Related posts

Check if any checkboxes are selected in jQuery »

---