In this article I’m going to explain how to check or
uncheck all CheckBox or multiple CheckBox.
It’s quite
easy to do this by JQuery. I have done two examples, you can implement in your
project based on requirement.
1.
Check or uncheck all CheckBox on Checkbox
click
2.
Check or uncheck all CheckBox on Button
click
1. Check or uncheck all CheckBox on
Checkbox click
Add
JQuery library:
Please add this JQuery library on <head> section
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.7.1.js"></script>
Add
Script:
<script type="text/javascript">
$(document).ready(
function () {
//clicking
the parent checkbox should check or uncheck all child checkboxes
$(".parentCheckBox").click(
function ()
{
$(this).parents('fieldset:eq(0)').find('.childCheckBox').prop('checked', this.checked);
});
//clicking
the last unchecked or checked checkbox should check or uncheck the parent
checkbox
$('.childCheckBox').click(
function ()
{
if ($(this).parents('fieldset:eq(0)').find('.parentCheckBox').prop('checked')
== true && this.checked
== false) $(this).parents('fieldset:eq(0)').find('.parentCheckBox').prop('checked', false);
if (this.checked == true)
{
var
flag = true;
$(this).parents('fieldset:eq(0)').find('.childCheckBox').each(
function
() {
if
(this.checked == false)
flag = false;
});
$(this).parents('fieldset:eq(0)').find('.parentCheckBox').prop('checked', flag);
}
});
});
</script>
Add
HTML Markup:
<fieldset>
<input type="checkbox" class="parentCheckBox" />Parent
1 <br />
<input type="checkbox" class="childCheckBox" />Child
1-1 <br />
<input type="checkbox" class="childCheckBox" />Child
1-2 <br />
<input type="checkbox" class="childCheckBox" />Child
1-3 <br />
<input type="checkbox" class="childCheckBox" />Child
1-4 <br />
<input type="checkbox" class="childCheckBox" />Child
1-5 <br />
</fieldset>
<fieldset>
<input type="checkbox" class="parentCheckBox" />Parent
2 <br />
<input type="checkbox" class="childCheckBox" />Child
2-1 <br />
<input type="checkbox" class="childCheckBox" />Child
2-2 <br />
<input type="checkbox" class="childCheckBox" />Child
2-3 <br />
<input type="checkbox" class="childCheckBox" />Child
2-4 <br />
<input type="checkbox" class="childCheckBox" />Child
2-5 <br />
</fieldset>
2. Check or uncheck all CheckBox on
Button click
Demo:
Add
JQuery library:
Please add this JQuery library on <head> section
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.7.1.js"></script>
Add
Script:
<script type="text/javascript"
>
$(document).ready(function () {
$('.check:button').toggle(function () {
$('input:checkbox').attr('checked', 'checked');
$(this).val('uncheck all')
}, function
() {
$('input:checkbox').removeAttr('checked');
$(this).val('check all');
})
})
</script>
Add
HTML Markup:
<input type="button" class="check" value="check all" />
<input type="checkbox" class="cb-element" />
Checkbox 1
<input type="checkbox" class="cb-element" />
Checkbox 2
<input type="checkbox" class="cb-element" />
Checkbox 3