dimanche 12 juin 2016

Checking and unchecking checkboxes with dynamic ids and class using jquery

I have below HTML which I am using to create a Grid. The grid has grouping i.e the grid shows products of each group. So, the grid structure has GroupName and a checkbox with it in the first row and then it follows some rows which shows products which are under that group with each having a checkbox too.

Same way I will have some other groups and their products which I am binding like below. As each product list have its group name on top. I want a functionality where I can be able to click on header group checbox and then all the items under that group will be checked and vice versa. Also If I check all the subitems one by one, Group header checkbox should automatically checked true. I have set the same class for main group checkbox and all its sub items.

CSHTML
@{
    if (Model.ListOfGroups.Count() > 0)
    {
    <table>
        <tr>
            <td>&nbsp;</td>
            <td>Group Name</td>
            <td>Category Name</td>
            <td>SubCategory Name</td>
            <td>Release Date</td>
        </tr>
        @foreach (var obj in Model.ListOfGroups)
        {
            <tr>
                <td>
                    <input type="checkbox" class="cls@(obj.GroupId)" name="@obj.GroupId" onclick="checkUncheckAll(this.class)" />
                </td>
                <td>
                    @obj.GroupName
                </td>
            </tr>
            foreach (var objList in Model.ListOfProducts)
            {
                if (objList.groupid == obj.GroupId)
                {
            <tr>
                <td>
                    <input type="checkbox" class="cls@(obj.GroupId)" name="@obj.GroupId" /></td>
                <td>&nbsp;</td>
                <td>@objList.categoryName</td>
                <td>@objList.subcategoryName</td>
                <td>@(Html.Kendo().DatePicker().Name(@objList.pkID + "datepicker"))</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>

Aucun commentaire:

Enregistrer un commentaire