Pages

Wednesday 26 February 2014

How to Check Unchecked All Check boxes with Header in using jQuery c#

How to Check Unchecked All Check boxes with Header in using jQuery c#

.Aspx:
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Check uncheck 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"/>sizar</label></li>
<li><label><input type="checkbox" name="chkUser" value="4049"/>sahil</label></li>
<li><label><input type="checkbox" name="chkUser" value="4076"/>salim</label></li>
<li><label><input type="checkbox" name="chkUser" value="4086"/>rameez</label></li>
<li><label><input type="checkbox" name="chkUser" value="4087"/>nasir</label></li>
<li><label><input type="checkbox" name="chkUser" value="4116"/>karim</label></li>
</ul>
</body>
</html>

Demo:
 



No comments:

Post a Comment