Select All Checkboxes, Row wise or Column wise using jquery

In this tutorial, I am going to create three types of checkbox functionality for selecting all checkboxes, we can select all checkboxes or we can also select all checkboxes in a row with one click and we can also select all cell checkboxes in a single column by one click.

So I will create three functions for below:

  • Select All checkboxes 
  • Select All checkboxes in a row
  • Select all checkboxes in a column

I will cover this functionality using the simple steps below:

  • Step 1: Create an HTML table structure 
  • Step 2: Create jQuery Function 
  • Step 2: Create CSS Style
Tree directory structure  script With PHP

Create an HTML table structure 

        
        <div class="ath_container">
        <div class="table-responsive">
            <table class="">
                <thead>
                    <tr>

                        <th>
                            <div class="input_outer">
                                <input type="checkbox" id="check_all" class="check_all">
                                <label for="check_all">All All
                                </label>
                            </div>
                        </th>
                        <th>
                            <div class="input_outer">
                                <input type="checkbox" id="column_01" class="check_column">
                                <label for="column_01">All column
                                </label>
                            </div>
                        </th>
                        <th>
                            <div class="input_outer">
                                <input type="checkbox" id="column_02" class="check_column">
                                <label for="column_02">All column
                                </label>
                            </div>
                        </th>
                        <th>
                            <div class="input_outer">
                                <input type="checkbox" id="column_03" class="check_column">
                                <label for="column_03">All column
                                </label>
                            </div>
                        </th>
                        <th>
                            <div class="input_outer">
                                <input type="checkbox" id="column_04" class="check_column">
                                <label for="column_04">All column
                                </label>
                            </div>
                        </th>
                    </tr>
                </thead>
                <tbody>

                    <tr>
                        <td>
                            <div class="input_outer">
                                <input type="checkbox" id="row_01" class="check_row">
                                <label for="row_01">Check row
                                </label>
                            </div>
                        </td>

                        <td>
                            <input type="checkbox" id="access_01" name="permissions[]">
                            <label for="access_01">Access
                            </label>
                        </td>
                        <td>
                            <div class="input_outer">
                                <input type="checkbox" id="access_02" name="permissions[]">
                                <label for="access_02">Edit
                                </label>
                            </div>
                        </td>
                        <td>
                            <div class="input_outer">
                                <input type="checkbox" id="access_03" name="permissions[]">
                                <label for="access_03">Create
                                </label>
                            </div>
                        </td>
                        <td>
                            <div class="input_outer">
                                <input type="checkbox" id="access_04" name="permissions[]">
                                <label for="access_04">Delete
                                </label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="input_outer">
                                <input type="checkbox" id="row_02" class="check_row">
                                <label for="row_02">Check row
                                </label>
                            </div>
                        </td>

                        <td>
                            <input type="checkbox" id="access_05" name="permissions[]">
                            <label for="access_05">Access
                            </label>
                        </td>
                        <td>
                            <div class="input_outer">
                                <input type="checkbox" id="access_06" name="permissions[]">
                                <label for="access_06">Edit
                                </label>
                            </div>
                        </td>
                        <td>
                            <div class="input_outer">
                                <input type="checkbox" id="access_07" name="permissions[]">
                                <label for="access_07">Create
                                </label>
                            </div>
                        </td>
                        <td>
                            <div class="input_outer">
                                <input type="checkbox" id="access_08" name="permissions[]">
                                <label for="access_08">Delete
                                </label>
                            </div>
                        </td>

                    </tr>
                    <tr>
                        <td>
                            <div class="input_outer">
                                <input type="checkbox" id="row_03" class="check_row">
                                <label for="row_03">Check row
                                </label>
                            </div>
                        </td>

                        <td>
                            <input type="checkbox" id="access_09" name="permissions[]">
                            <label for="access_09">Access
                            </label>
                        </td>
                        <td>
                            <div class="input_outer">
                                <input type="checkbox" id="access_10" name="permissions[]">
                                <label for="access_10">Edit
                                </label>
                            </div>
                        </td>
                        <td>
                            <div class="input_outer">
                                <input type="checkbox" id="access_11" name="permissions[]">
                                <label for="access_11">Create
                                </label>
                            </div>
                        </td>
                        <td>
                            <div class="input_outer">
                                <input type="checkbox" id="access_12" name="permissions[]">
                                <label for="access_12">Delete
                                </label>
                            </div>
                        </td>

                    </tr>
                    <tr>
                        <td>
                            <div class="input_outer">
                                <input type="checkbox" id="row_04" class="check_row">
                                <label for="row_04">Check row
                                </label>
                            </div>
                        </td>

                        <td>
                            <input type="checkbox" id="access_13" name="permissions[]">
                            <label for="access_13">Access
                            </label>
                        </td>
                        <td>
                            <div class="input_outer">
                                <input type="checkbox" id="access_14" name="permissions[]">
                                <label for="access_14">Edit
                                </label>
                            </div>
                        </td>
                        <td>
                            <div class="input_outer">
                                <input type="checkbox" id="access_15" name="permissions[]">
                                <label for="access_15">Create
                                </label>
                            </div>
                        </td>
                        <td>
                            <div class="input_outer">
                                <input type="checkbox" id="access_16" name="permissions[]">
                                <label for="access_16">Delete
                                </label>
                            </div>
                        </td>

                    </tr>
                </tbody>
            </table>
        </div>
    </div>
        
    

Step 2: Create jQuery Function

        
        <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function () {


            // Check all rows
            $('#check_all').click(function () {
                $('input').prop('checked', this.checked);
            });

            // Check all columns
            $('.check_column').click(function () {
                var index = $(this).closest('th').index();
                var isChecked = $(this).prop('checked');
                $('.check_row').each(function () {
                    var checkboxes = $(this).closest('tr').find(':checkbox');
                    checkboxes.eq(index).prop('checked', isChecked);
                });


            });


            $('.check_row').click(function () {
                var checkboxes = $(this).closest('tr').find(':checkbox');
                checkboxes.prop('checked', this.checked);
            });

        });
    </script>
        
    

Related Post

Step 2: Create CSS Style

        
        body {
            font-family: "Open Sans", sans-serif;
            line-height: 1.25;
        }

        .ath_container {
            max-width: 100%;
            width: 1024px;
            margin: auto;
            padding: 20px;
        }

        .table-responsive {
            overflow: auto;
            max-width: 100%;
        }

        table {
            border: 1px solid #ccc;
            border-collapse: collapse;
            margin: 0;
            padding: 0;
            width: 100%;
            table-layout: fixed;
        }

        table caption {
            font-size: 1.5em;
            margin: .5em 0 .75em;
        }

        table tr {
            border: 1px solid #ddd;
            padding: .35em;
        }

        table tr:nth-child(even) {
            background-color: #f8f8f8;
        }

        table tr:hover {
            background-color: #f8f8f8;
        }

        table th,
        table td {
            padding: .625em;
            text-align: left;
            width: 140px;
        }

        table th {
            font-size: .85em;
            letter-spacing: .1em;
            text-transform: uppercase;
            background: #a5b2ff;
        }
        
    

Leave a comment