locked
How can I add <Select All> and <Deselect All> option RRS feed

  • Question

  • User-1355965324 posted

    I have created an html page , Here I want to bring an individual row selection  , also <Select All >  <Deselect All > option. When I click <Select All > button all  checkbox should be ticked , If I click <Deselct All > button   all  checkbox should be unticked. Also each check box can also be checked. Please can you help to bring that functionality in my html page.

    Please help me

    https://codepen.io/anon/pen/rEaGXv?&editable=true

    Wednesday, June 12, 2019 5:58 AM

Answers

  • User665608656 posted

    Hi polachan,

    To achieve your requirements, I suggest that you add onclick events to your target element and use toggleClass in jQuery to switch the class of the current element.

    You could refer to this link about change checkbox state with bootstrap: https://codepen.io/roskill/pen/BZwmmQ

    Then,you could add a custom prop attribute to the element to facilitate access to all current checkboxes in jquery.

    The value of prop is used to distinguish whether the check box is a full check box or not.

    When you select the full check box, switch the selection state of the full check box, and get whether the class attribute of the current full check box is the selected state by attr.

    If it is the selected state, get all the check boxes except the full check box in the current page, and modify the check state of these check boxes to ensure that they are consistent with the state of the full check box, and switch the text behind the full check box to the opposite state.

    When you select a single check box, switch the selection status of the current check box, and cycle all the check boxes on the current page except the full check box to determine their selection status.

    If all the check boxes are selected, check the whole check box back, otherwise cancel the check status of the full check box.

    For more details, you could refer to the following codes:

    <!DOCTYPE html>
    
    <html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script type="text/javascript">
            function checkAllOrNot() {
                $('*[prop="checkboxall"]').toggleClass("glyphicon-unchecked glyphicon-check");
                if ($('*[prop="checkboxall"]').attr("class") == "glyphicon glyphicon-check") {
                    $('*[prop="checkbox"]').attr("class", "glyphicon glyphicon-check");
                    $('#selectorUnselect').html("Unselect All");
                } else {
                    $('*[prop="checkbox"]').attr("class", "glyphicon glyphicon-unchecked");
                    $('#selectorUnselect').html("Select All");
                }
            }
            function checkSelf(box) {
                $(box).toggleClass("glyphicon-unchecked glyphicon-check");
                var i = 0;
                var j = 0;
                $('*[prop="checkbox"]').each(function () {
                    if ($(this).attr("class") == "glyphicon glyphicon-check") {
                        i++;
                    } else {
                        j++;
                    }
                });
                if (i == $('*[prop="checkbox"]').length) {
                    $('*[prop="checkboxall"]').attr("class", "glyphicon glyphicon-check");
                    $('#selectorUnselect').html("Unselect All");
                } else {
                    $('*[prop="checkboxall"]').attr("class", "glyphicon glyphicon-unchecked");
                    $('#selectorUnselect').html("Select All");
                }
            }
    
        </script>
    </head>
    <body>
        <a class="cursor-pointer approve" style="display: inline-flex;align-items: center;font-size: 15px;height: 29px;" onclick="checkAllOrNot()"><i class="glyphicon glyphicon-unchecked" prop="checkboxall" ></i><span id="selectorUnselect" >Select All</span></a>
        <div class=" table-responsive">
            <table class="table table-bordered table-striped">
                <tbody>
                    <tr class="">
                        <td>Employee</td>
                        <td style="width:120px">Date </td>
                        <td style="width:120px" class="hidden">Date To </td>
                        <td style="width:50px">Hrs </td>
                        <td style="width:350px">Reason</td>
                        <td style="width:120px">Status</td>
                        <td class="text-center" style="width:120px">Approve</td>
                    </tr>
                    <tr id="tr-35023">
                        <td>KYLE OGLE</td>
                        <td>06/06/2019</td>
                        <td class="hidden">06/06/2019</td>
                        <td>9.00</td>
                        <td>Holiday</td>
                        <td>Pending</td>
                        <td class="text-center">
                            <a id="chk-35023" data-hildayid="35023" data-depot="1" class="cursor-pointer approve">
                                <i class="glyphicon glyphicon-unchecked" prop="checkbox" onclick="checkSelf(this)"></i>
                            </a>
                        </td>
                    </tr>
                    <tr id="tr-35024">
                        <td>KYLE OGLE</td>
                        <td>07/06/2019</td>
                        <td class="hidden">07/06/2019</td>
                        <td>8.30</td>
                        <td>Holiday</td>
                        <td>Pending</td>
                        <td class="text-center">
                            <a id="chk-35024" data-hildayid="35024" data-depot="1" class="cursor-pointer approve">
                                <i class="glyphicon glyphicon-unchecked" prop="checkbox" onclick="checkSelf(this)"></i>
                            </a>
                        </td>
                    </tr>
                    <tr id="tr-35025">
                        <td>KYLE OGLE</td>
                        <td>10/06/2019</td>
                        <td class="hidden">10/06/2019</td>
                        <td>9.00</td>
                        <td>Holiday</td>
                        <td>Pending</td>
                        <td class="text-center"> <a id="chk-35025" data-hildayid="35025" data-depot="1" class="cursor-pointer approve"><i class="glyphicon glyphicon-unchecked" prop="checkbox" onclick="checkSelf(this)"></i></a>   </td>
                    </tr>
                </tbody>
            </table>
        </div>
    
    </body>
    </html>

    The result of my work demo:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 12, 2019 8:19 AM