Checkbox Plays a key role in forms. Sometimes there is a need to select or Check/Uncheck all options (ex. email inbox) then, how it happens and what technique is used to do this?
This blog post answers the above question.
We used jQuery to accomplish this, moreover we have explained two ways to do the same, one is by using button to check/uncheck all options, and other one is by using a single checkbox to check/uncheck all options. All you have to do is just follow or download our code as per your requirement and implement it in your forms.
HTML File: all_check.html
In this file all the basic html code has written. To place various html elements.
<!DOCTYPE html>
<html>
<head>
<title>Check & Uncheck All Check Boxes</title>
<!-- Include CSS File Here -->
<link href="css/all_check.css" rel="stylesheet">
<!-- Include JS File Here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/all_check.js"></script>
</head>
<body>
<div id="main">
<div id="first">
<h1>Check & Uncheck All Options</h1>
<p>Check & Uncheck All Options by Button</p>
<input id="checkAll" type="button" value="Check/Uncheck All ">
<div class="button">
<input class="first" id="Item 1" name="option1" type="checkbox">
<label class="label1" for="Item 1">Item 1</label>
<input class="first" id="Item 2" name="option1" type="checkbox">
<label class="label1" for="Item 2">Item 2</label>
<input class="first" id="Item 3" name="option1" type="checkbox">
<label class="label1" for="Item 3">Item 3</label>
<input class="first" id="Item 4" name="option1" type="checkbox">
<label class="label1" for="Item 4">Item 4</label>
</div>
<p>Check & Uncheck All Options by Check Box</p>
<input class="second" id="selectall" name="check" type="checkbox">
<label class="label2" for="selectall">Check/Uncheck All</label>
<div class="check">
<input class="second" id="Item A" name="option2" type="checkbox">
<label class="label2" for="Item A">Item A</label>
<input class="second" id="Item B" name="option2" type="checkbox">
<label class="label2" for="Item B">Item B</label>
<input class="second" id="Item C" name="option2" type="checkbox">
<label class="label2" for="Item C">Item C</label>
<input class="second" id="Item D" name="option2" type="checkbox">
<label class="label2" for="Item D">Item D</label>
</div>
</div>
</body>
</html>
JQUERY File: all_check.js
Main functionality of the code has written in this file.
$(document).ready(function() {
// Below code is used to remove all check property if,
// User select/unselect options with class first options.
$(".first").click(function() {
$("#checkAll").attr("data-type", "uncheck");
});
// Below code is used to remove all check property if,
// User select/unselect options with name=option2 options.
$("input[name=option2]").click(function() {
$("#selectall").prop("checked", false);
});
/////////////////////////////////////////////////////////////
// JS for Check/Uncheck all CheckBoxes by Button //
/////////////////////////////////////////////////////////////
$("#checkAll").attr("data-type", "check");
$("#checkAll").click(function() {
if ($("#checkAll").attr("data-type") === "check") {
$(".first").prop("checked", true);
$("#checkAll").attr("data-type", "uncheck");
} else {
$(".first").prop("checked", false);
$("#checkAll").attr("data-type", "check");
}
})
/////////////////////////////////////////////////////////////
// JS for Check/Uncheck all CheckBoxes by Checkbox //
/////////////////////////////////////////////////////////////
$("#selectall").click(function() {
$(".second").prop("checked", $("#selectall").prop("checked"))
})
});
CSS FIle: all_check.css
Styling of html elements is done here.
@import "http://fonts.googleapis.com/css?family=Arvo";
/* Above line is used for online Google font */
hr{
margin-top:-13px;
margin-bottom:25px
}
h1{
font-size:30px
}
p{
padding-left:35px;
font-weight:700
}
div#main{
width:960px;
height:825px;
margin:50px auto;
font-family:'Arvo',sans-serif
}
div#first{
width:460px;
height:500px;
padding:10px 25px 30px;
float:left;
border:12px solid #F99;
margin-top:25px;
box-shadow:0 0 25px
}
input#checkAll{
background:linear-gradient(to bottom,#59d0f8 5%,#49c0e8 100%);
border:1px solid #0c799e;
padding:7px 25px;
font-size:15px;
color:#fff;
margin-left:40px;
margin-top:-10px;
border-radius:5px;
cursor:pointer
}
input#checkAll:hover{
background:linear-gradient(to bottom,#49c0e8 5%,#59d0f8 100%)
}
.button{
margin-top:15px;
margin-bottom:35px;
border-bottom:1px solid #ccc
}
.check{
margin-top:15px;
border-top:1px dashed #ccc;
padding-top:15px
}
/* -------------------------------------
CSS for Checkbox (Check/Uncheck) with Button
---------------------------------------- */
input[type=checkbox].first{
display:none
}
/*--------------------------------------------------------------------------------
Creating Checkbox and label as a single unit(for Cross browser compatibility)
----------------------------------------------------------------------------------*/
input[type=checkbox].first + label.label1{
padding-left:35px;
display:inline-block;
line-height:30px;
background-repeat:no-repeat;
cursor:pointer;
margin-left:40px;
margin-right:90px
}
input[type=checkbox].first:checked + label.label1{
background-position:0 -30px
}
label.label1{
background-image:url(../images/check1.png)
}
/* -------------------------------------
CSS for Checkbox (Check/Uncheck) with Checkbox
---------------------------------------- */
input[type=checkbox].second{
display:none
}
/*--------------------------------------------------------------------------------
Creating Checkbox and label as a single unit(for Cross browser compatibility)
----------------------------------------------------------------------------------*/
input[type=checkbox].second + label.label2{
padding-left:44px;
display:inline-block;
line-height:34px;
background-repeat:no-repeat;
cursor:pointer;
margin-left:40px;
margin-right:90px
}
input[type=checkbox].second:checked + label.label2{
background-position:0 -34px
}
label.label2{
background-image:url(../images/check2.png)
}
Conclusion:
So, This was all about how to check/uncheck all available checkboxes using jquery, visit our other blogs and keep following us.
Also have a look on some more informative blogs –
- Simple jQuery Contact Form with Validation
- Captcha Code in PHP
13 Replies to “jQuery Uncheck/Check All Checkboxes”
Hi
Nice script which I found relatively easy to understand and to implement even though I don’t know much about Jquery.
However, I think the example has a flaw which could really ruin the day for a user !
Here is why:
if I select all checkboxes to be checked and then uncheck one or more and then hit submit, then the form will still act as if all the checkboxes were checked !
Try and imagine what would happen if this was implemented into a form where a user could delete something…
So in my opinion the script should have a safeguard implemented, which would uncheck the “Select All” as soon as the user uncheck one of the check checkboxes.
oops! we missed to test it on form submission. Thanks a lot neo !
Now, we have optimized our code for this.
Hi
Thank you for correcting this issue, however, the changes doesn’t seem to work in the second part of the online demo where a checkbox is used.
ps. looking forward to more great tutorials.
Hi
Just a small tip for other users:
I had a problem with getting it work with multiple checkboxes as their name attribute was an array (ie. name=”checkbox_name[]”)
My solution was to give the checkboxes an id (ie. id=”chk”) and then replace this in:
$(“input[name=option2]”).click(function(){
with
$(“input[id=chk]”).click(function(){
Now it is working, but somehow I feel that it isn’t the most optimum solution…
Hi all
*Update*
I wasn’t satisfied with using the id attribute as this could cause a bit of trouble if the content of the checkboxes was populated from a database – ie. looping (using a foreach loop) would cause them all to have the same id ! – unless some preparations are made to assign each checkbox an id of its own.
The bottomline is: that it would complicate matters a bit.
In stead I used the name attribute which will be the same for all the checkboxes:
$(“input[name=’list_item[]’]”).click(function(){
Pay attention to the quotation marks as they are important especially the two single ones which wraps the list_item[], if these a forgotten then it won’t work !
Well, that’s all – I hope others finds this information useful and can befit from this as well
excellent work
Thanks for your appreciation !
Keep reading our blog posts.
nice code……good job bro….really appreciated!!!
Thanks for your appreciation !
Keep reading our blog posts.
I have check boxes with same id “RoleType_1″ how can i loop all the check boxes with same id.
Hi,
i have one doubt…
if I checked all checkboxes without checking the Check/Uncheck All checkbox it should also checked right??, but in this demo it is not happening.
Hope,i’ll get a solution from you.
thanks for information. Article is amazing.
i couldnt use it my codeigniter why? please help me.