Solution 1 :

Here ‘s a solution with only js. You can also do it with JQuery.

Add a class in your checkbox (or use an existing one). It allows you to get all your checkboxes (in my example ckBox). Also, add a button with a onClick event handler

    <input type="checkbox" class="ckBox"  id="vehicle1" name="vehicle1" value="Bike">

    <input type="checkbox" class="ckBox" id="vehicle2" name="vehicle2" value="Car">
   
    <input type="checkbox" class="ckBox" id="vehicle3" name="vehicle3" value="Boat">
   
    
    <button id="selectOrUnselect" onClick="toggleSelect()">select</button>
    <script>

        // var used to toggle 
        let allSelected = true
        
        // get the button, use to change the inside text
        const btnSelect =  document.getElementById("selectOrUnselect")

        // get all the checkboxes
        const ckBoxes = document.getElementsByClassName("ckBox")

        function toggleSelect(){
            // change check to uncheck or uncheck to check
            for(let i = 0 ; i < ckBoxes.length; ++i){
                ckBoxes[i].checked = allSelected;
            }
            // change button text 
            if(allSelected){
               btnSelect.innerText = "Unselect"
            }else{
                btnSelect.innerText = "select"
            }
            allSelected = !allSelected
        }

    </script>

Problem :

        <table class="table table-striped grid-table">
        <tr>
            <th>object</th>
            <th>design</th>
            <th></th>
        </tr>
        @foreach (var item in (IEnumerable<cit.Models.getUsersOrgUnit_Result>)Model)
        {
            <tr>
                <td>@item.idorgunit</td>
                <td>@item.orgunitname</td>
                <td>



       @*@Html.CheckBox(item.id.ToString(), item.iduser == ViewBag.iduser ? true :false, new {           
             idorgunit = item.idorgunit, @class = "chkorgunit" })*@       

                    <div class="pure-checkbox">
                        <input type="checkbox" idorgunit="@item.idorgunit" class="chkorgunit" checked="@(item.iduser == ViewBag.iduser ? true : false)" name="@item.id.ToString()" id="@item.id.ToString()" />
                        <label for="@item.id.ToString()"></label>
                    </div>



                </td>
            </tr>
        }
    </table>

I need to create button select all for checkboxes, and deselect all.
I have long list so i need this solution for making this easily.

By

Leave a Reply

Your email address will not be published. Required fields are marked *