Related Posts Plugin for WordPress, Blogger...

About

Follow Us

Friday, 29 November 2013

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