1

我似乎无法让我的 JQuery 工作。我附上了我的视图，它有一个循环，以表格格式显示每个模型。每个模型旁边都有一个复选框。表头还有一个复选框项目名称/ID 作为 checkAll。我已经引用了我的 JQuery 脚本并添加了我的函数。当我单击 checkAll 复选框时，我无法使该功能正常工作。我对 JQuery 非常陌生，无法解决这个问题？

@model IEnumerable<MVC_Example2___ADO.Models.Employees>

@{
    ViewBag.Title = "Delete";
}
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript" >
</script>
<script type="text/javascript">
    $(function () {
        $("#checkAll").click(function () {
            $("input[name='EmployeeIDToDelete']").click(function () {
                if ($("input[name='EmployeeIDToDelete']").length == $("input[name='EmployeeIDToDelete']:checked").length) {
                    $("#checkAll").attr("checked", "checked");
                }
                else {
                    $("#checkAll").removeAttr("checked");
                }
            })
        })
    })
</script>
<html>
<body>
    @using (Html.BeginForm())
    {
        <table align="center" border="1" style="border:ridge;">
            <thead>
                <tr>
                    <td><input type="checkbox" id="checkAll" name="checkAll" /> </td>
                    <td>Photo</td>
                    <td>Name</td>
                    <td>Gender</td>
                </tr>
            </thead>
            <tbody>
                @Html.EditorForModel()
            </tbody>
        </table>
        <input type="submit" name="submit" value="Delete Entries" />
    }
</body>
</html>
4

2 回答 2

0

有几件事：

  1. 您正在单击标题复选框的处理程序中添加行复选框的单击处理程序，因此不会从行触发任何事件。
  2. attr()当您可能应该使用时，您使用不当prop()（属性与属性——它们是两个不同的东西）。

这是我写这个的方法：

$(function() {
  var $checkAll = $('#checkAll');
  var $inputs = $('input[name="EmployeeIDToDelete"]');
  
  $checkAll.click(function() {
    $inputs.prop('checked', this.checked);
  });

  $inputs.change(function() {
      $checkAll.prop('checked', $inputs.length == $inputs.filter(':checked').length);
  }).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<input type="checkbox" id="checkAll" />

<hr />

<input type="checkbox" name="EmployeeIDToDelete" />
<br/>
<input type="checkbox" name="EmployeeIDToDelete" />
<br/>
<input type="checkbox" name="EmployeeIDToDelete" />
<br/>
<input type="checkbox" name="EmployeeIDToDelete" />
<br/>

于 2015-04-30T19:58:45.040 回答
0

您正在将点击处理程序添加到EmployeeIDToDelete而不是选中/取消选中它们，因此请删除它。
使用prop代替attr

    $("#checkAll").click(function () {
        //$("input[name='EmployeeIDToDelete']").click(function () {
            if ($("input[name='EmployeeIDToDelete']").length == $("input[name='EmployeeIDToDelete']:checked").length) {
                $("#checkAll").prop("checked", true);
            }
            else {
                $("#checkAll").prop("checked", false);
            }
        //})
    })
于 2015-04-30T19:57:11.897 回答