Wednesday 11 June 2014

Select / DeSelect Checkbox using JQuery


HTML:


<table>
            <tr>
                <th>
                    <input type="checkbox" class="cbHeader" />
                </th>
                <th>Name
                </th>
                <th>City
                </th>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="cbItems" />
                </td>
                <td>Ajay
                </td>
                <td>Mehsana
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="cbItems" />
                </td>
                <td>Hitesh
                </td>
                <td>Kalol
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="cbItems" />
                </td>
                <td>Vishal
                </td>
                <td>Ahmedabad
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="cbItems" />
                </td>
                <td>Matang
                </td>
                <td>Bopal
                </td>
            </tr>
        </table>


Javascript:


     $(document).ready(function () {
            $(".cbHeader").change(function () {
                $(".cbItems").prop("checked", $(this).is(":checked"));
            });

            $(".cbItems").change(
            function () {
                if ($(".cbItems").length == $(".cbItems:checked").length) {
                    $(".cbHeader").prop("checked", true);
                }
                else {
                    $(".cbHeader").prop("checked", false);
                }
            });

        })



No comments:

Post a Comment