Introduction:
Here
I will explain how to use jQuery
to select deselect all checkboxes or check uncheck all checkboxes using jQuery.
Description:
In previous articles I explained jQury select header checkbox when all child checkboxes selected, jQuery Check /uncheck checkboxes in gridview, jQuery print div with css, jQuery get all selected checkbox values with comma separated values, JavaScript show single quote in string and many articles relating to JavaScript, jQuery, asp.net. Now I will explain how to select deselect all checkboxes in jQuery.
In previous articles I explained jQury select header checkbox when all child checkboxes selected, jQuery Check /uncheck checkboxes in gridview, jQuery print div with css, jQuery get all selected checkbox values with comma separated values, JavaScript show single quote in string and many articles relating to JavaScript, jQuery, asp.net. Now I will explain how to select deselect all checkboxes in jQuery.
To
implement this we need to write the code like as shown below
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery
Select Deselect all Checkboxes</title>
<script src="http://code.jquery.com/jquery-1.8.2.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function ()
{
$('input[name="chkUser"]').click(function () {
if ($('input[name="chkUser"]').length
== $('input[name="chkUser"]:checked').length)
{
$('input:checkbox[name="chkAll"]').attr("checked", "checked");
}
else {
$('input:checkbox[name="chkAll"]').removeAttr("checked");
}
});
$('input:checkbox[name="chkAll"]').click(function () {
var slvals = []
if ($(this).is(':checked')) {
$('input[name="chkUser"]').attr("checked", true);
}
else {
$('input[name="chkUser"]').attr("checked", false);
slvals = null;
}
});
})
</script>
<style type="text/css">
li
{
list-style-type:none;
}
</style></head>
<body>
<ul>
<li><label><input type="checkbox" name="chkAll" value="All"/>
Select All
</label></li>
<li><label><input type="checkbox" name="chkUser" value="3930"/>Suresh</label></li>
<li><label><input type="checkbox" name="chkUser" value="4049"/>Rhoini</label></li>
<li><label><input type="checkbox" name="chkUser" value="4076"/>Mahesh</label></li>
<li><label><input type="checkbox" name="chkUser" value="4086"/>Mahendra</label></li>
<li><label><input type="checkbox" name="chkUser" value="4087"/>Madhav</label></li>
<li><label><input type="checkbox" name="chkUser" value="4116"/>Honey</label></li>
<li><label><input type="checkbox" name="chkUser" value="4143"/>Sateesh</label></li>
<li><label><input type="checkbox" name="chkUser" value="4296"/>Praveen</label></li>
</ul>
</body>
</html>
|
Demo
|
Note: if you are using asp.net
checkbox controls then you need to replace
$('input:checkbox[name="chkAll"]')
with ('[id$= chkAll]')
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
5 comments :
Nice idea Friend
Very Useful Article :D
i m manoj kumar too good dear suresh
Thanks for your valuable idea...
sir please explain in detail for asp.net
Note: Only a member of this blog may post a comment.