How to Select / Deselect all Checkboxes with jQuery | Coding Cage

How to Select / Deselect all Checkboxes with jQuery

By
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.

How to Select all / Deselect all Checkboxes with jQuery
 

Here is the code

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 :

simple HTML form containing multiple checkbox
<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

complete script with html form for selecting / deselecting checkboxes.
<!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

now let's take a look at the following code which helps you to get the multiple selected values and print them, suppose we have following form.
<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 :

and PHP code would be as follow, using "foreach" loop we can retrieve the selected checkboxes values.
<?php
if(isset($_POST['save']))
{
 if(isset($_POST['chk'])=="")
 {
  echo "please select at least one";
 }
 else
 {
  foreach($_POST['chk'] as $languages)
  {
   echo $languages."<br />";
  } 
 }
}

?>
that's it guys, if you found this helpful then please share on facebook, twitter and google plus.



5 comments:

  1. Pradeep i found your tutorial very nice helpful, i also wrote tutorial how to select/deselect all checkboxes using jQuery, i hope you like it.
    https://htmlcssphptutorial.wordpress.com/2015/08/18/select-deselect-all-checkboxes-using-jquery/

    ReplyDelete
    Replies
    1. Hi Javed ...

      thanks for linking your tutorial with us,
      and of course i liked it ... :)

      Delete
  2. I can't download script from App.box.com this site is just a shit. Kindly upload files to DROPBOX or alternative from where your users can download your tutorials file.

    your OLDEST FAN

    ReplyDelete

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download