How To Select All CheckBoxes using JQuery

This example demonstrates how to select all the checkboxes using JQuery. It is one of the common requirement in many of the applications, when there is multiple checkboxes in a page, we have to keep an option for “select all” and when all the checkboxes got selected, by default “select all” check box also to be selected. Here I have written a simple example to demonstrate that.

<!DOCTYPE html>
<html>
<head>
    <title>How to Check All Check Boxes using JQuery</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
         $(function () {

            var chkId = '';
            $('.chkNumber:checked').each(function () {
                chkId += $(this).val() + ",";
            });
            chkId = chkId.slice(0, -1);

           $('.chkSelectAll').change(function () {
                $('.chkNumber').prop('checked', this.checked);
            });

     $('.chkNumber').change(function() { $('.chkSelectAll').prop('checked',$('.chkNumber:checked').length == $('.chkNumber').length);
     });

        });
    </script>
</head>
<body>
    <h2>Select All Check Boxes using JQuery</h2>
    <table id="mytable">
        <tr>
            <td>
                <input type="checkbox" class="chkSelectAll" />SelectAll
            </td>
            <td><input type="checkbox" class="chkNumber" value="1" />One</td>
            <td><input type="checkbox" class="chkNumber" value="2" />Two</td>
            <td><input type="checkbox" class="chkNumber" value="3" />Three</td>
            <td><input type="checkbox" class="chkNumber" value="4" />Four</td>
            <td><input type="checkbox" class="chkNumber" value="5" />Five<br /></td>
        </tr>
    </table>
</body>
</html>

JQuery CheckBox Demo

checkbox-all

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>