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 –