Check or Uncheck Checkboxes with jQuery And Get Selected with PHP

Photo of Mike Dalisay
Modified Tuesday, March 1, 2011
by - @ninjazhai
When you have a list of data, sometimes, you want to easily check all or uncheck all of them. And then process those selected/checked data by getting their values first. Today we're going to do something like what we're using in GMail or YahooMail.

1. Check or Uncheck All Checkboxes in a form (using jQuery). 
2. Get the selected checkboxes values when the form is submitted (using PHP). 

Check or Uncheck Checkboxes with jQuery And Get Selected with PHP
Just like select/unselect all

In case you want instant testing you may download the code or see the result in live demo:


          <title>Check and Uncheck All</title>
     <div style='margin: 10px'><input type='checkbox' id='checker' />Check/Uncheck All</div>
          <form action='#' method='post'>
               <div style='margin: 10px'> 
               //name should be like in array format: emotions[]
               <input type='checkbox' name='emotions[]' class='checkboxes' value='Happy' />Happy
               <input type='checkbox' name='emotions[]' class='checkboxes' value='Sad' />Sad
               <input type='checkbox' name='emotions[]' class='checkboxes' value='Excited' />Excited
               <input type='checkbox' name='emotions[]' class='checkboxes' value='Scared' />Scared
               <div style='margin: 10px'>
                     //the action when the from is submitted: get_values
                    <input type='hidden' name='action' value='get_values' />
                    <input type='submit' value='Submit Selected' />
               <div style='margin: 10px'>
                    //Defining indexes/posted values
                    empty($_POST['action']) ? $action = '' : $action = $_POST['action'];
                    empty($_POST['emotions']) ? $emotions = '' : $emotions = $_POST['emotions'];
                    if( $action == 'get_values'){
                         //check if user ticked any checkbox
                              //loop to display values
                              foreach($emotions as $keys => $values){
                                   echo "<div>$values</div>";
                                   //message when there's no selected checkbox
                                   echo "Please select emotions.";
                //jQuery library used: jquery-1.6.1.min.js
               <script type='text/javascript' src='js/jquery-1.6.1.min.js'></script>
               <script type='text/javascript'>
                    $(document).ready(function() {
                         //check/uncheck script
                         $( '#checker' ).click(function(){
                              $( '.checkboxes' ).attr( 'checked', $( this ).is( ':checked' ) );

The Code of a Ninja Resources

For FREE programming tutorials, click the red button below and subscribe! :)
Thanks for the comments!
"First do it, then do it right, then do it better."
~ Addy Osmani
"Talk is cheap. Show me the code."
~ Linus Torvalds
Let's Stay Connected!
g+ r
Android app on Google Play
© 2011-2014 The Code Of A Ninja. All rights reserved. Proudly Powered by Google Blogger. Images, logos, marks or names mentioned herein are the property of their respective owners.