How to Select / Deselect all Checkboxes with jQuery

     

In this tutorial i am going to explain you that how to do “Select / Deselect all checkboxes using jQuery”, Most of newbie learners face this issue that how to select all and deselect all checkboxes of any needable forms , this one is simple script but yet useful, hence we can also select checkbox values individually but we frequently need this type of snippets to perform multiple operations, like gmail you can select all emails and perform any operations it have, so this will guide you that how to use jQuery to select and deselect all checkboxes, and at the end of this tutorial we will also see that how to get selected (multiple) checkboxes value and print them so have a look.

The jQuery code : in the following code there is a parent class called “.select-all” which changes the attribute of sub checkboxes on “.click” function and all the functionality done by including the “jQuery.js” library in your head document.

<script type="text/javascript">
$('document').ready(function()
{
 $(".select-all").click(function ()
 {
  $('.chk-box').attr('checked', this.checked)
 });
 
 $(".chk-box").click(function()
 {
  if($(".chk-box").length == $(".chk-box:checked").length)
  {
   $(".select-all").attr("checked", "checked");
  }
  else
  {
   $(".select-all").removeAttr("checked");
  }
 });
});
</script>

The HTML Code :

<ul>
 <li><input type="checkbox" class="select-all" /> Select / Deselect All</li>
    <li><input type="checkbox" class="chk-box" /> PHP</li>
    <li><input type="checkbox" class="chk-box" /> Ajax</li>
    <li><input type="checkbox" class="chk-box" /> jQuery</li>
    <li><input type="checkbox" class="chk-box" /> Android</li>
    <li><input type="checkbox" class="chk-box" /> XML</li>
</ul>

Complete Script

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Select / Deselect All Checkboxes with jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$('document').ready(function()
{
 $(".select-all").click(function ()
 {
  $('.chk-box').attr('checked', this.checked)
 });
 
 $(".chk-box").click(function()
 {
  if($(".chk-box").length == $(".chk-box:checked").length)
  {
   $(".select-all").attr("checked", "checked");
  }
  else
  {
   $(".select-all").removeAttr("checked");
  }
 });
});
</script>
</head>

<body>

<h1>Select / Deselect All Checkboxes with jQuery</h1>

<ul>
 <li><input type="checkbox" class="select-all" /> Select / Deselect All</li>
    <li><input type="checkbox" class="chk-box" /> PHP</li>
    <li><input type="checkbox" class="chk-box" /> Ajax</li>
    <li><input type="checkbox" class="chk-box" /> jQuery</li>
    <li><input type="checkbox" class="chk-box" /> Android</li>
    <li><input type="checkbox" class="chk-box" /> XML</li>
</ul>

</body>
</html>

Get The Values Of Selected Checkboxes

<form method="post">
<ul>
 <li><label><input type="checkbox" class="select-all" /> Select / Deselect All</label></li>
    <li><input type="checkbox" name="chk[]" class="chk-box" value="PHP" /> PHP</li>
    <li><input type="checkbox" name="chk[]" class="chk-box" value="Ajax" /> Ajax</li>
    <li><input type="checkbox" name="chk[]" class="chk-box" value="jQuery" /> jQuery</li>
    <li><input type="checkbox" name="chk[]" class="chk-box" value="Android" /> Android</li>
    <li><input type="checkbox" name="chk[]" class="chk-box" value="XML" /> XML</li>
    <li><button type="submit" name="save">submit</button></li>
</ul>
</form>

PHP CODE :

<?php
if(isset($_POST['save']))
{
 if(isset($_POST['chk'])=="")
 {
  echo "please select at least one";
 }
 else
 {
  foreach($_POST['chk'] as $languages)
  {
   echo $languages."<br />";
  }
 }
}

?>