Pages

▼

Saturday, 12 November 2022

Select A Table all rows by checkbox using jquery

Select/Unselect  Table all row by clicking the checkbox using jquery. You can do this by class selector. Make a class and apply it on all checkbox and select or unselect using class name by just one line of code.

Name City
Ram Vns
Syam Alld
Gita LKO
Anita Vns

Code

<html>

<head>

    <title>Table Select</title>

    <style>

        .chk {

        }

    </style>


    <script>

        function SelectCheckbox() {

            if ($("#chk")[0].checked)

                $('.chk').prop('checked', true);

            else

                $('.chk').prop('checked', false);

 

        }

    </script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

</head>

<body>

    <table border="1">

        <tr>

            <th>

                <input type="checkbox" id="chk" onclick="SelectCheckbox()" />

            </th>

            <th>Name</th>

            <th>City</th>

        </tr>

        <tr>

            <td>

                <input type="checkbox" class="chk" />

            </td>

            <td>

                Ram

            </td>

            <td>Vns</td>

        </tr>

        <tr>

            <td>

                <input type="checkbox" class="chk" />

            </td>

            <td>

                Syam

            </td>

            <td>Alld</td>

        </tr>

        <tr>

            <td>

                <input type="checkbox" class="chk" />

            </td>

            <td>

                Gita

            </td>

            <td>LKO</td>

        </tr>

        <tr>

            <td>

                <input type="checkbox" class="chk" />

            </td>

            <td>

                Anita

            </td>

            <td>Vns</td>

        </tr>

    </table>

</body>

</html>


at

No comments:

Post a Comment