Dynamic Check-boxes, with Select/Unselect All in MVC using JQuery.

Posted by on
We have cases where we need to check/uncheck all check-boxes depending on one check-box, say “Select All”. This can be done easily by using jQuery, below line of code demonstrate the same.


Here I have considered case in MVC .net development environment where we need to create check box dynamically depending on model count and check/uncheck them depending on user’s selection and get selected check-box value as well.

For this we need model which will be something like below class:-

    public partial class Person
    {
        public bool Selected { get; set; }
        public Nullable<long> PersonID { get; set; }
        public string Name { get; set; }       
    }

Then we need cshtml view page with check-boxes and jQuery:-

@model List<Person>

<script>
    $(document).ready(function () {
      
        //Check/Uncheck All checkboxes
        $("#chkSelectAllPerson").click(function () {
            if ($("#chkSelectAllPerson").is(':checked')) {
                $(".chkPerson").each(function () {
                    $(this).prop("checked", true);
                });

            } else {
                $(".chkPerson").each(function () {
                    $(this).prop("checked", false);
                });
            }
            //Get selected Persons Ids in Array
            GetSelectedPersonsID();
        });


        $(".chkPerson").click(function () {
            if ($(this).is(':checked')) {
                //check/uncheck "Select All" checkbox on change of individual person checkbox change
                if ($('.chkPerson:checked').length == $('.chkPerson').length) {
                    $("#chkSelectAllPerson").prop("checked", true);
                }

            } else {
                $("#chkSelectAllPerson").prop("checked", false);
            }
            //Get selected Person Ids in Array
            GetSelectedPersonsID();
        });

        //Get Selected Persons IDs
        function GetSelectedPersonsID() {
            var checkedPersonIds = [];
            $(".chkPerson").each(function () {
                if ($(this).is(':checked')) {
                    checkedPersonIds.push($(this).val());
                }
            });
            //Here You will get all selected persons ID
            alert("Selected Persons:- " + checkedPersonIds);
        }
    });
</script>

<div>
    @if (Model.Count > 1)
    {
        <ul class="list-group">
            @*This is select All Check box on click on this we will check/uncheck check boxes*@
            <li class="list-group-item">
                @*Check if already all persons are selected*@
                @if (Model.Count() == Model.Count(i => i.Selected == 1))
                {
                    <input type="checkbox" id="chkSelectAllPerson" checked>
                }
                else
                {
                    <input type="checkbox" id="chkSelectAllPerson">
                }
                Select All
            </li>
            @*Dynamic creation of checkbox depending on Model Count*@
            @for (var i = 0; i < Model.Count; i++)
        {
        <li class="list-group-item">
            @if (Model[i].Selected == true)
                {
                <input type="checkbox" class="chkPerson" value="@Model[i].PersonID" checked>
                }
                else
                {
                <input type="checkbox" class="chkPerson" value="@Model[i]. PersonID" >
                }
            @Model[i].Name
        </li>
        }
        </ul>
    }
    else
    {
        <div>
            <h4 style="color:GrayText">No data to display</h4>
        </div>
    }
</div>
HTML page will look like below image, this can be changes as per requirement.


Comments

Post a Comment