The SelectAllCheckbox is a jQuery-based plug-in that can be used to allow visitors to check or uncheck all options at one go.
- If the group of checkboxes contains a disabled checkbox(es) then its state will not be changed.
- You may add as many checkboxes as you require in the group by using this plug-in.
Developer’s page Download plug-in
How to set up SelectAllCheckbox plug-in on your website?
Include the reference to the JS file of the plug-in after jQuery:
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.12.1.min.js”></script>
<script type=”text/javascript” src=”js/selectallcheckbox/jquery.selectallcheckbox.js”></script>
Initiate the plug-in via jQuery:
$( "#checkall" ).selectAllCheckbox( {
checkboxesName : "chkboxgroup",
onChangeCallback : onChange
} );
The markup can be seen in the demo below.
A demo of select all/none checkboxes
In this demo, three groups of checkboxes are created with select all/none checkbox with each. If you press “Select All”, the status is shown towards the right side.
The code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script type="text/javascript" src="js/selectallcheckbox/jquery.selectallcheckbox.js"></script>
<script type="text/javascript">
function onChange( checkboxes, checkedState ) {
var html = "<p>Changed:<br/>";
for( var i = 0; i < checkboxes.length; i++ ) {
var box = checkboxes[i];
var line = box.attr( "id" ) + " : " + ( box.prop("checked") ? "checked" : "unchecked" ) + "<br/>";
html += line;
}
html += ("</p><p>Checked state of group is: " + checkedState + "</p>");
$( "#log" ).html( html );
}
$( document ).ready( function() {
$( "#expertisegroup" ).selectAllCheckbox( {
checkboxesName : "yourexpertise",
onChangeCallback : onChange
} );
$( "#selectAllGroup2" ).selectAllCheckbox( {
checkboxesName : "group2",
onChangeCallback : onChange,
useIndeterminate : false
} );
$( "#selectAllGroup3" ).selectAllCheckbox( {
checkboxesName : "group3",
onChangeCallback : onChange
} );
$( "#btnChangeByScript" ).click( function() {
var selector = "#group3_a";
$( selector ).prop( "checked", !$(selector).prop("checked") );
$( selector ).trigger( "change" );
} );
$( "#selectAllGroup4" ).selectAllCheckbox( {
checkboxesName : "group4",
onChangeCallback : onChange
} );
} );
</script>
<style type="text/css">
html, body { padding-top: 0; margin-top: 0; }
label {
display: block;
}
.selectAllLabel {
font-size: larger;
font-weight: bold;
}
#container {
width: 400px;
}
#container, #checkboxes, #log {
display: table-cell;
min-width: 350px;
vertical-align: middle;
padding: 10px;
}
#checkboxes, #log {
border: 1px solid #000000;
}
#log {
position : fixed;
top: 10px;
left: 430px;
height: 150px;
}
</style>
</head>
<body>
<div id="container">
<div id="checkboxes">
<h3>Your Expertise (indeterminate)</h3>
<label class="selectAllLabel">
<input type="checkbox" id="expertisegroup"/>
Select All
</label>
<label>
<input type="checkbox" id="jQuery" name="yourexpertise" value="jQuery"/>
jQuery
</label>
<label>
<input type="checkbox" id="JavaScript" name="yourexpertise" value="JavaScript"/>
JavaScript
</label>
<label>
<input type="checkbox" id="Bootstrap" name="yourexpertise" value="Bootstrap"/>
Bootstrap
</label>
<label>
<input type="checkbox" id="CSS" name="yourexpertise" value="CSS"/>
CSS
</label>
<label>
<input type="checkbox" id="HTML" name="yourexpertise" value="HTML"/>
HTML
</label>
<h3>Group 2 (<em>de</em>terminate)</h3>
<label class="selectAllLabel">
<input type="checkbox" id="selectAllGroup2"/>
Select All
</label>
<label>
<input type="checkbox" id="group2_a" name="group2" value="2a"/>
Choice A
</label>
<label>
<input type="checkbox" id="group2_b" name="group2" value="2b"/>
Choice B
</label>
<label>
<input type="checkbox" id="group2_c" name="group2" value="2c"/>
Choice C
</label>
<h3>Group 3 (change by script)</h3>
<label class="selectAllLabel">
<input type="checkbox" id="selectAllGroup3"/>
Select All
</label>
<label>
<input type="checkbox" id="group3_a" name="group3" value="3a"/>
Choice A
</label>
<label>
<input type="checkbox" id="group3_b" name="group3" value="3b"/>
Choice B
</label>
<label>
<input type="checkbox" id="group3_c" name="group3" value="3c"/>
Choice C
</label>
<input type="button" id="btnChangeByScript" value="Change 'Choice A' box by script"/>
<h3>Group 4 (disabled checkboxes)</h3>
<p>
The state of disabled checkboxes are unaffected by the select-all checkbox.
Their default states, whether checked or unchecked, remain - and they
contribute to the status of the overall checkbox group. Note that the
select-all checkbox never displays as unchecked - it's either checked or
indeterminate. This is because there is a disabled, checked checkbox.
</p>
<label class="selectAllLabel">
<input type="checkbox" id="selectAllGroup4"/>
Select All
</label>
<label>
<input type="checkbox" id="group4_a" name="group4" value="4a" checked="checked" disabled/>
Choice A
</label>
<label>
<input type="checkbox" id="group4_b" name="group4" value="4b" disabled/>
Choice B
</label>
<label>
<input type="checkbox" id="group4_c" name="group4" value="4c"/>
Choice C
</label>
<label>
<input type="checkbox" id="group4_d" name="group4" value="4d"/>
Choice D
</label>
</div>
</div>
<div id="log">
Interact with the demo. Callback updates will appear here.
</div>
</body>
</html>
Notice this jQuery code for the group:
$( "#expertisegroup" ).selectAllCheckbox( {
checkboxesName : "yourexpertise",
onChangeCallback : onChange
} );
You can see in the above demo, you have to use the same name for a group of checkboxes.
The name is referred to in the script part along with the ID of the checkbox with the Select All option.
You may read more about this simple and handy plug-in by visiting the developer’s page which contains properties and configuration options.