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>

        // 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 
               btnSelect.innerText = "Unselect"
                btnSelect.innerText = "select"
            allSelected = !allSelected


Problem :

        <table class="table table-striped grid-table">
        @foreach (var item in (IEnumerable<cit.Models.getUsersOrgUnit_Result>)Model)

       @*@Html.CheckBox(, 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="" id="" />
                        <label for=""></label>


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.


Leave a Reply

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