65.9K
CodeProject 正在变化。 阅读更多。
Home

ASP.NET MVC：使用 JQuery 为复选框表格添加全选复选框

约翰·阿滕
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.80/5 (4投票s)

2014年1月6日

CPOL

4分钟阅读

viewsIcon

64847

ASP.NET MVC：使用 JQuery 为复选框表格添加全选复选框

jQuery-CSS-Logo

通常，我们发现需要向用户呈现表格或列表中的项目列表，带有复选框，以便用户可以从列表中选择一个或多个项目进行额外的处理。大多数情况下，用户将从列表中选择一些项目，但保留大部分未选中状态，或者选择列表中的全部或大部分项目，而保留很少的项目未选中。

在这些情况下，为用户提供“全选”或“全不选”功能，然后切换整个列表的选中状态是很方便的。常用的方法是使用另一个复选框，全局应用于列表本身，执行切换操作。

其中一种方法是使用 JQuery。

示例项目

我们将使用我创建的一个现有示例项目来演示 如何显示带有复选框的表格，用于每一行，允许提交到服务器以处理选定的项目。在这里，我们将重点关注 Index 视图的选中状态切换部分。

您可以在我的 Github 仓库中找到 示例项目的源代码。

如果您从 Github 克隆或下载源代码，您将需要 启用 Nuget Package Restore，以便 VS 可以在项目构建时自动下载和更新 Nuget 包。

Index 视图，带有表格中的可选项

为了我们的目的，我们只需要查看 Index 视图，该视图显示一个表格，其中每一行在最左侧都有一个复选框，允许用户从列表中选择一个或多个单独的行项目。

View 的原始代码如下所示

带有表格和复选框的 Index 视图
@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" />
}

在上面，我们设置了一个表格，并使用一个 自定义编辑器模板来呈现每一行项目，允许在每一行上选择文本框，其状态将反映在通过 HTTP POST 请求在表单提交时传递回控制器的模型数据中。

我们希望在表格上方添加一个复选框，选择它将一次切换表格中所有复选框的选中状态。

添加全选复选框

为此，我们将通过添加一个包含我们的全局复选框的 <div> 元素来修改 Index 页面上的表单，我们将其命名为“checkall”，然后还将我们的 HTML 表格包装在一个名为“checkboxes”的div 中，然后我们可以使用 JQuery 来操作它。

在 Index 页面上将 Div 元素添加到 HTML 表单中
@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 代码

现在我们将添加一些 JQuery 以在我们要切换复选框状态时执行操作。为简单起见，我们将此代码直接添加到我们的页面上。请注意，有很多方法可以做到这一点，您可能会在 Internet 上看到一些略有不同的方法。

在我们的视图代码下，我们将添加一个 <scripts> 部分，并添加以下 JQuery。

添加 JQuery 以切换表格行项目的复选框状态
@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>

在上面的代码中，我们定义了一个函数，toggleChecked()，它将表格中每个复选框的选中状态设置为与全局“checkall”复选框的状态匹配。然后，在 JQuery (document).ready() 函数中，我们将全局“checkall”复选框的默认值设置为true，并将对 toggleChecked() 函数的调用附加到全局“checkall”复选框的click 事件。正如我们所看到的，这样做并不复杂，但对于那些不熟悉 Jquery 的人来说，可能并不直观。正如我提到的，网络上有很多方法可以做到这一点。如果您看到更好的方法，或者注意到我上面做的事情很愚蠢，请在评论中告诉我，或者通过“关于作者”部分中的地址给我发送电子邮件。

其他资源和感兴趣的项目

© . All rights reserved.