JQuery 未从复选框中全选

Question

我的 JQuery 似乎无法正常工作。我附上了我的视图，它有一个循环，以 table 格式显示每个模型。每个模型旁边都有一个复选框。 table 头部还有一个复选框项目 name/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>

Answer 1

您要将点击处理程序添加到 EmployeeIDToDelete 而不是 checking/unchecking 它们，因此请将其删除。
使用 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);
            }
        //})
    })

Answer 2

几件事：

您要在 header 复选框的单击处理程序中添加行复选框的单击处理程序，因此不会从行触发任何事件。
当您可能应该使用 prop() 时，您却错误地使用了 attr()（特性与属性——它们是两个不同的东西）。

我会这样写：

$(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/>

JQuery 未从复选框中全选

JQuery not selecting all in from checkbox

c#

checkbox

jquery

client-side-scripting

asp.net-mvc-4