Part 66 - Check及Uncheck所有CheckBox 同时删除多行数据记录的实现

来源：互联网发布：淘宝贷款没还会怎么样编辑：程序博客网时间：2024/05/29 19:02

实现效果：勾选Name左边的CheckBox（后面部分简称‘它’），则所有CheckBox都会被选中, 再次Unckeck它，所有都不被选中；如果其他所有CheckBox都选中了，Name左边的CheckBox会自动选中；反之，如果其他的没有全部被选中，则它不会被自动选中或者由自动Uncheck.

Controller代码如下：

using MVC_DeleteMultiRow.Models;using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using MVC_DeleteMultiRow;using MVC_DeleteMultiRow.Models;namespace MVC_DeleteMultiRow.Controllers{    public class StudentController : Controller    {        SampleEntities db = new SampleEntities();        // GET: Student        public ActionResult Index()        {            return View(db.Students.ToList());        }        public ActionResult Delete(IEnumerable<int> employeeIdsToDelete)        {            List<Student> stul=db.Students.Where(x => employeeIdsToDelete.Contains(x.ID)).ToList();            foreach(Student item in stul)            {                db.Students.Remove(item);            }            db.SaveChanges();            return RedirectToAction("Index");        }    }}

Controller对应的View代码如下，其中JS和JQuery部分实现Check及Uncheck所有CheckBox的功能

@model IEnumerable<MVC_DeleteMultiRow.Models.Student>@{    ViewBag.Title = "Index";}<h2>Employee List</h2>@using (Html.BeginForm("Delete", "Student", FormMethod.Post)){    <table border="1">        <thead>            <tr>                <th>                   <span style="background-color: rgb(255, 255, 153);"> <input type="checkbox" name="checkAll" id="checkAll"></span>                </th>                <th>                    Name                </th>                <th>                    Gender                </th>                <th>                    Email                </th>            </tr>        </thead>        <tbody>            @*@Html.EditorForModel()*@            @foreach(var item in Model)           {            <tr>              <td>                <span style="background-color: rgb(255, 255, 153);"><input type="checkbox" name="employeeIdsToDelete" id="employeeIdsToDelete" value="@item.ID"></span>              </td>              <td>                  @item.Name              </td>              <td>                  @item.Name              </td>              <td>                  @item.Name              </td>            </tr>           }        </tbody>    </table>    <input type="submit" id="btnSubmit" name="btnSubmit" value="Delete Selected students"/>}<span style="background-color: rgb(255, 255, 204);"><script src="~/Scripts/jquery-1.10.2.min.js"></script><script type="text/javascript" language="javascript">    $(function () {        $("#checkAll").click(function () {            $("input[name='employeeIdsToDelete']").prop("checked", this.checked);        });        $("input[name='employeeIdsToDelete']").click(function () {            if ($("input[name='employeeIdsToDelete']").length == $("input[name='employeeIdsToDelete']:checked").length) {                    $("#checkAll").prop("checked", true);               }              else {                //$("#checkAll").removeAttr("checked");                $("#checkAll").prop("checked", false);                }        });        $("#btnSubmit").click(function () {            var count = $("input[name='employeeIdsToDelete']:checked").length;            if (count == 0) {                alert("No rows selected to delete");                return false;            }            else {                return confirm(count + " row(s) will be deleted");            }        });    });</script> </span>

0 0