Check/uncheck all checkboxes using Jquery in MVC - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

Check/uncheck all checkboxes using Jquery in MVC

In this tutorial I am going to explain how to check and uncheck all checkboxes using Jquery in MVC.

Description:
I am displaying list of employees in which every row have checkbox to select/check in front of them. There is one more checkbox in header, when check this checkbox all visible records will be selected/checked and unchecked. This functionality will be implemented using jquery.

Implementation:
I am using database approach to implement this tutorial. I have create a table employee.

Model
  public partial class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public Nullable<int> Phone { get; set; }
        public Nullable<int> Salary { get; set; }
        public string Department { get; set; }
        public string ImagePath { get; set; }
        public string EmailId { get; set; }
    }

Add controller
Add empty controllers to project. Create action to get employee list from database.

Complete code of Controller:

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using mvctest2017.Models;


namespace mvctest2017.Controllers
{
    public class EmployeeController : Controller
    {
        private DemoEntities db = new DemoEntities();

        //
        // GET: /Employee/

        public ActionResult Index()
        {
            return View(db.Employees.ToList());
        }
    }
}


Add View
Add view for Index action.
Jquery function use to check/uncheck checkboxes:

<script>
    $(document).ready(function () {
        $("#checkAll").click(function () {
            if (this.checked)
            {
                $(".chkbox").prop('checked', $(this).prop('checked', true));
            }
            else {
                $('.chkbox').each(function () { this.checked = false; });
            }         
        });
        $('.chkbox').on('click', function () {
            if ($('.chkbox:checked').length == $('.chkbox').length) {
                $('#checkAll').prop('checked', true);
            } else {
                $('#checkAll').prop('checked', false);
            }
        });    
    });
</script>


Complete source of Index View:

@model IEnumerable<mvctest2017.Models.Employee>
@{
    ViewBag.Title = "Check/uncheck Checkboxes";
}

<table>
    <tr>
        <th><input id="checkAll" type="checkbox" /></th>
        <th>
          @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Phone)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Salary)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Department)
        </th>
        <th>
            Image
        </th>
        <th>
           Email
        </th>
        <th>Action</th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td><input type="checkbox" class="chkbox" value="@item.Id" /></td>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Phone)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Salary)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Department)
        </td>
        <td>
           @if(item.ImagePath !=null)
           {
            <img src="@Url.Content(item.ImagePath)" alt="aspmantra.com" height="100px" width="100px" />
           }
           else
           {
                <img src="@Url.Content("~/images/image.jpg")" alt="aspmantra.com" height="100px" width="100px" />
           }
        </td>
        <td>
@if (item.EmailId != null)
{
            @Html.DisplayFor(modelItem => item.EmailId)
}
else
{
    <span style="color:red">Email not available</span>
}
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Details", "Details", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id })
        </td>
    </tr>
}

</table>
<script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        $("#checkAll").click(function () {
            if (this.checked)
            {
                $(".chkbox").prop('checked', $(this).prop('checked', true));
            }
            else {
                $('.chkbox').each(function () { this.checked = false; });
            }         
        });
        $('.chkbox').on('click', function () {
            if ($('.chkbox:checked').length == $('.chkbox').length) {
                $('#checkAll').prop('checked', true);
            } else {
                $('#checkAll').prop('checked', false);
            }
        });    
    });
</script>


                  



What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon