使用jQuery检查和取消选中具有动态ID和类的复选框

Question

I have a grid that has grouping ie the grid shows products of group. So, the structure has Group and its childs. Same way I will have some other groups and their childs which I am binding like below.I want to check and uncheck the entire sublist on the click of 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();" />

I have been trying to do this like below but no success. Also I want to pick all the checked group and its subitems on click of save button. Any help would be really appreciated.

<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

You're calling your function passing in undefined because you're passing this.class :

onclick="checkUncheckAll(this.class)"

Elements don't have a class property (they do have className ), and if they did, you dont' want to pass its class , you want to pass the element itself since you're using it as sender.checked .

Just remove the .class from the call.

If you're trying to do all within a group , then you'll need to use className in the function when getting the other checkboxes to 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;
        }
    }
}

That assumes you'll only ever have a single class on the "all" checkboxes.