Click here to Skip to main content
11,487,406 members (69,798 online)
Click here to Skip to main content

Tagged as

ASP.NET MVC: Add a Select All Checkbox to a Checklist Table Using JQuery

, 6 Jan 2014 CPOL 14.6K 7
Rate this:
Please Sign up or sign in to vote.
Often, we find we need to present our users with a list of items in a table or list, with checkboxes such that the user can select one or more items from the list for additional processing. Most of the time, the user will either be selecting a few items from the list but leaving most unchecked, or s

jQuery-CSS-Logo Often, we find we need to present our users with a list of items in a table or list, with checkboxes such that the user can select one or more items from the list for additional processing. Most of the time, the user will either be selecting a few items from the list but leaving most unchecked, or selecting all or most of the items from the list and leaving very few items unchecked.

In these cases, it is handy to offer the user a means to "Select All" or "Select None" which then toggles the checked state of the entire list. The common means to do this is with one more checkbox, global to the list itself, which performs the toggling action.

One way to do this is to use JQuery.

The Example Project

We will use an existing example project I created to demonstrate how to display a table with checkboxes for each row, which allows submission to the server for processing the selected items. Here, we will focus on the selection toggling portion of the Index View.

You can find the source code for the example project on my Github repo.

If you clone or download the source from Github, you will need to Enable Nuget Package Restore in order that VS can automatically download and update Nuget packages when the project builds.

The Index View, with Selectable Items in a Table

For our purposes, we will only need to look at the Index view, which presents a table where each row features a checkbox on the leftmost side allowing the user to select one or more individual row items from the list.

The original code for the View looks like this:

Index View with a Table and Checkboxes:
@model AspNetCheckedListExample.Models.PeopleSelectionViewModel
  
@{
    ViewBag.Title = "People";
}
  
<h2>People</h2>
  
@using (Html.BeginForm("SubmitSelected", "People", FormMethod.Post, new { encType = "multipart/form-data", name = "myform" }))
{
    <table class="table">
        <tr>
            <th>
                Select
            </th>
            <th>
                Name
            </th>
            <th></th>
        </tr>
        @Html.EditorFor(model => model.People)
    </table>
    <hr />
    <br />
    <input type="submit" name="operation" id="submit" value="Submit Selected" />
}

 

In the above, we set up a table, and use a custom Editor Template to render each row item, allowing for the selectable textbox on each row, the status of which will be reflected in the model data passed back to the controller in an Http POST request on form submit.

We want to add a checkbox above the table, selection of which toggles the checked status of all the checkboxes in the table at once.

Add the Select All Checkbox

To do this, we will modify the form on our Index page by adding a <div> element containing our global checkbox, which we will name "checkall", and then also wrap our Html table in a div named "checkboxes" that we can then manipulate using JQuery:

Add Div Elements to HTML Form on the Index Page:
@using (Html.BeginForm("SubmitSelected", "People", FormMethod.Post, new { encType = "multipart/form-data", name = "myform" }))
{
    // Add a new checkbox in its own div element:
    <div>
        <input type="checkbox" id="checkall" /><span>Check All</span>
    </div>
  
    // Wrap the table element in a div named "checkboxes":
    <div id="checkboxes">
        <table class="table">
            <tr>
                <th>
                    Select
                </th>
                <th>
                    Name
                </th>
                <th></th>
            </tr>
            @Html.EditorFor(model => model.People)
        </table>
    @*Close the "checkboxes" div element:*@
    </div>
    <hr />
    <br />
    <input type="submit" name="operation" id="submit" value="Submit Selected" />
}

 

JQuery Code to Manipulate the Checkboxes

Now we will add some JQuery to perform the manipulation when we want to toggle the checkbox status. For simplicity, we are going to add this code right on our page. Note that there are myriad ways to do this, and you may see some methods out on the internet which are slightly different.

Under our view code, we will add a <scripts> section, and add the following JQuery:

Add JQuery to Toggle the Checkbox Status for the Table Row Items:
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
  
    <script type="text/javascript">
  
        function toggleChecked(status) {
            $("#checkboxes input").each(function () {
                // Set the checked status of each to match the 
                // checked status of the check all checkbox:
                $(this).prop("checked", status);
            });
        }
  
        $(document).ready(function () {

            // Grab a reference to the check all box:
            var checkAllBox = $("#checkall");

            //Set the default value of the global checkbox to true:
            checkAllBox.prop('checked', true);

            // Attach the call to toggleChecked to the
            // click event of the global checkbox:
            checkAllBox.click(function () {
                var status = checkAllBox.prop('checked');
                toggleChecked(status);
            });
        });
    </script>
  In the above code, We define a function, toggleChecked() , which sets the checked status of each checkbox in the table to match that of the global "checkall" checkbox. Then, in the JQuery (document).ready() function, we the default value of the global "checkall" checkbox to true, and attach a call to the toggleChecked() function to the click event of the global "checkall" checkbox. As we can see, it is not a complex matter to do this, but it may not be intuitive to those newer to Jquery. As I mentioned, there are myriad ways to do this out there on the web. if you have seen a better way, or noticed something I have done above that it just plain stupid, please do let me know in the comments, or drop me an email at the address in the About the Author section.

Additional Resources and Items of Interest

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

John Atten
Software Developer XIV Solutions
United States United States
My name is John Atten, and my username on many of my online accounts is xivSolutions. I am Fascinated by all things technology and software development. I work mostly with C#, Javascript/Node.js, Various flavors of databases, and anything else I find interesting. I am always looking for new information, and value your feedback (especially where I got something wrong!)
Follow on   Twitter   Google+

Comments and Discussions

 
QuestionJust a slight "nit pick" Pin
lespauled6-Jan-14 8:23
memberlespauled6-Jan-14 8:23 
AnswerRe: Just a slight "nit pick" Pin
John Atten6-Jan-14 8:29
memberJohn Atten6-Jan-14 8:29 
AnswerRe: Just a slight "nit pick" Pin
John Atten6-Jan-14 8:40
memberJohn Atten6-Jan-14 8:40 
GeneralRe: Just a slight "nit pick" Pin
lespauled6-Jan-14 8:46
memberlespauled6-Jan-14 8:46 
GeneralRe: Just a slight "nit pick" Pin
John Atten6-Jan-14 8:48
memberJohn Atten6-Jan-14 8:48 
GeneralRe: Just a slight "nit pick" Pin
lespauled6-Jan-14 8:55
memberlespauled6-Jan-14 8:55 
GeneralRe: Just a slight "nit pick" Pin
John Atten6-Jan-14 9:40
memberJohn Atten6-Jan-14 9:40 
GeneralRe: Just a slight "nit pick" Pin
lespauled6-Jan-14 10:36
memberlespauled6-Jan-14 10:36 
AnswerRe: Just a slight "nit pick" Pin
John Atten7-Jan-14 2:35
memberJohn Atten7-Jan-14 2:35 
GeneralMy vote of 5 Pin
Jason Gayda6-Jan-14 7:04
memberJason Gayda6-Jan-14 7:04 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150520.1 | Last Updated 6 Jan 2014
Article Copyright 2014 by John Atten
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid