在同一行中选中复选框时，请选中DataGrid-Row中的所有复选框

Question

I am developing a webpage for changing Rights(Add/View/Delete/Edit/All) for a subadministrator for all modules in Project.Say, there are 5 modules. I have loaded current rights in datagrid for each module(in datagrid there are 5 rows(modules) and for that module 5 columns of rights in checkbox). I need functionality like, when i check 'ALL' checkbox, for that (module), other checkbox for Add,View,Edit,Delete should be checked and when i uncheck 'ALL' checkbox, other checkbox should be unchecked. Any solution accepted for javascript or any event. I tried with checkedchanged event, but it checkes/unchecks all the checkboxes of entire datagrid instead for that module(row). In checkedchanged event i wrote this code..

foreach (DataGridItem dgitem in dg_rights.Items)
            {
                CheckBox chkall = (CheckBox)dgitem.FindControl("chk_all");
                CheckBox chkadd = (CheckBox)dgitem.FindControl("chk_add");
                CheckBox chkedit = (CheckBox)dgitem.FindControl("chk_edit");
                CheckBox chkview = (CheckBox)dgitem.FindControl("chk_view");
                CheckBox chkdelete = (CheckBox)dgitem.FindControl("chk_delete");
                if (chkall.Checked)
                {
                    chkadd.Checked = true;
                    chkedit.Checked = chkview.Checked = chkedit.Checked = chkdelete.Checked = true;
                }
                else
                {
                    chkadd.Checked = false;
                    chkedit.Checked = chkview.Checked = chkedit.Checked = chkdelete.Checked = false;
                }
            }

Looks like a am missing some basic thing or making a mistake. Any idea. Thanks Anish

Answer 1

You can this jQuery:

$('#<%= YourGrid.ClientID %> input[id$=_chkAll]').click(
    function () {
        var all_checked = $(this).attr('checked') == 'checked';
        $(this).parent().parent().find('input').each(
            function (i,o) {
                o.checked = all_checked;
            }
        )
    }
)

http://jsfiddle.net/4u6gw/

For an ASP.NET server side solution, you have to do this:

• set the chkall check box to autopostback
• hook onto ItemsGrid_Command(Object sender, DataGridCommandEventArgs e) and use e to get the datarow and.FindControl to get the other check boxes

Answer 2

I called function abcd with 'this' argument on 'onclick' for chk_all checkbox and i ended up with this and its working. Here chk_ is ids of all checkboxes starting with chk_n all will be checked.

function abcd(checkbox) {
            var cba = $("#" + checkbox.id);
            if (cba.is(':checked')) {
                //alert("check all")
                var cb = $("#" + checkbox.id);
                var td = cb.parent("td");
                var tr = td.parent("tr");
                tr.children().children("input:checkbox[id*=chk_]").attr('checked', cb.attr('checked'));
            }
            else {
                //alert("unchecked");
                var cb = $("#" + checkbox.id);
                var td = cb.parent("td");
                var tr = td.parent("tr");
                tr.children().children("input:checkbox[id*=chk_]").removeAttr('checked');
            }
        }

Thanks.