使用 jquery 选中和取消选中具有动态 ID 和 class 的复选框

Question

我有一个包含分组的网格，即网格显示组的产品。因此，该结构具有 Group 及其子项。以同样的方式，我将有一些其他组和我绑定的他们的孩子，例如 below.I 想要在单击 parent.

时选中和取消选中整个子列表

CSHTML
@{
    if (Model.List.Count() > 0)
    {
    <table>
        <tr>
              <input type="checkbox" class="cls@(obj.GroupId)" name="@obj.GroupId" onclick="checkUncheckAll(this.class)" />
            <td>Name</td>
          </tr>
        @foreach (var obj in Model.subList)
        {
            <tr>
                <td>
                    <input type="checkbox" class="cls@(obj.GroupId)" name="@obj.GroupId" /></td>
                </td>
                <td>
                    @obj.Name
                </td>
            </tr>
    </table>
    }
}


<input type="button" value="Save" onclick="PickAllCheckedRows();" />

我一直在尝试像下面那样做，但没有成功。我还想在单击保存按钮时选择所有选中的组及其子项。任何帮助将不胜感激。

<script type="text/javascript">
    function checkUncheckAll(sender) {
        alert(sender);
        var chkElements = document.getElementsByClassName('chkItems');
        for (var i = 0; i < chkElements.length; i++) {
            chkElements[i].checked = sender.checked;
        }
    }

  function PickAllCheckedRows() {
}
</script>

Answer 1

你正在调用你的函数传入 undefined 因为你正在传递 this.class:

onclick="checkUncheckAll(this.class)"

元素没有 class 属性（它们确实有 className），如果有，您不想传递它的 class，您想传递元素本身，因为您将其用作 sender.checked.

只需从通话中删除 .class。

如果您尝试在一个组中完成所有，那么您需要在函数中使用className，同时将其他复选框设置为check/uncheck:

function checkUncheckAll(sender) {
    var chkElements = document.getElementsByClassName(sender.className);
    // Note ------------------------------------------------^^^^^^^^^^
    for (var i = 0; i < chkElements.length; i++) {
        if (chkElements[i] !== sender) {             // Not strictly necessary I guess, but...
            chkElements[i].checked = sender.checked;
        }
    }
}

假设您在 "all" 复选框上只有一个 class。