How to check all checkbox when click on main checkbox

Some time question asked to me how to check all checkbox when click on main checkbox .
First create a case for this . Simply in your project city list display with checkbox .There are a button select all it also a checkbox. Your supervisor ask you to when we click on all then all cities are select and vice versa. I simply Create a situation here .Please have a look.

Code Sample [All Html & Jquery]

<!DOCTYPE html>
<html>
<head id="headbody">
    <title>Code By Topic</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#chkSelectAll').click(function () {
                if ($(this).is(':checked')) {
                    $('.chkCityCommon').prop('checked', true);
                }
                else {
                    $('.chkCityCommon').prop('checked', false);
                }

            });


        });
    </script>
</head>
<body>

    <div>
       <input type="checkbox" id="chkSelectAll"/>Select All
        <input type="checkbox" id="chkMumbai" class="chkCityCommon" />Mumbai
        <input type="checkbox" id="chkNoida" class="chkCityCommon" />Noida
        <input type="checkbox" id="chkLucknow" class="chkCityCommon" />Lucknow
        <input type="checkbox" id="chkKanpur" class="chkCityCommon" />Kanpur
        <input type="checkbox" id="chkLudhiyana" class="chkCityCommon" />Ludhiyana
    </div>
</body>
</html>

Code By Topic

How to check all checkbox when click on main checkbox

0 comments: