Jquery Check Uncheck All Checkboxes

checkall FI

If you are developing application that has quite number of checkbox, you should consider to make a check/uncheck all checkboxes feature to facilitate if users want to choose all the options in effective way rather than click it one by one. Today let’s take a look at how we make it possible to check all options in only one click.

JavaScript Code

Quite simple, we only use single line of code. Look at the highlighted code, we try to find checkboxe inside the id=”checkboxes” and set the attribute of “checked”.

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
       <script type="text/javascript">
            $(document).ready(function(){
            	 $("#checkall").click(function(){
            	 	   $("#checkboxes").find(":checkbox").attr("checked",this.checked);
            	 });
            })
       </script>

HTML Code

Simple HTML code contains 6 checkboxes and 2 div tags.

<body>
        <div id="box">
    	    Choose your favorite 
    	    <div id="checkboxes">
    	    	<input type="checkbox" value="Java">Java <br>
    	    	<input type="checkbox" value="PHP">PHP <br>
    	    	<input type="checkbox" value="JavaScript">JavaScript <br>
    	    	<input type="checkbox" value="HTML">HTML <br>
    	    	<input type="checkbox" value="CSS">CSS <br>
    	    	<hr>
    	    	<input type="checkbox" id="checkall" >Check/Uncheck All <br>
    	    </div>
        </div>
  </body>

CSS Code

Our css file for better view.

<style type="text/css">
            #box{
              width:500px;
              background:#96A8E0;
              padding:10px;
              border:solid #4968CC;
              margin:0 auto;
            }

            input{
              margin-right: 10px;
            }
      </style>

Screenshot

checkboxes

checked

Demo

Live Demo
Advertisements

3 thoughts on “Jquery Check Uncheck All Checkboxes

  1. Pingback: select all checkbox on check click |

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s