Introduction:
In this article you
will come to know how to Check/Uncheck all checkboxes using Jquery. Some time it is needed to select all
checkboxes in application, we can use jQuery to achieve this.
Demo:
Following JQuery script is used to select or unselect
all Checkboxes:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#chkall").click(function () {
$('.chk').attr('checked', this.checked);
});
$(".case").click(function () {
if ($(".chk").length
== $(".chk:checked").length) {
$("#chkall").attr("checked", "checked");
} else {
$("#chkall").removeAttr("checked");
}
});
});
</script>
Source Code for Sample Application:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#chkall").click(function () {
$('.chk').attr('checked', this.checked);
});
$(".case").click(function () {
if ($(".chk").length
== $(".chk:checked").length) {
$("#chkall").attr("checked", "checked");
} else {
$("#chkall").removeAttr("checked");
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<fieldset style="width:300px">
<legend><strong>Select all Check boxes
Using JavaScript</strong></legend>
<p><label>Select All</label><input type="checkbox" id="chkall"/></p>
<p>
<input type="checkbox" class="chk"/><label>Apple</label><br />
<input type="checkbox" class="chk"/> <label>Mango</label><br />
<input type="checkbox" class="chk"/> <label>Orange</label><br />
<input type="checkbox" class="chk"/> <label>Pineapple</label><br />
<input type="checkbox" class="chk"/> <label>Banana</label><br />
</p></fieldset>
</form>
</body>
</html>
0 comments:
Post a Comment