使用asp.net处理Repeater控件内的复选框

Question

绑定转发器控件后，我的复选框如下所示，

我在这里有两个疑问：

1. 如果我选中“组1”的复选框，则应选中“组1”下的所有项目。 我怎样才能做到这一点 ？

2. 我有“全选”按钮，单击该按钮应选择所有组的所有项目。 由于该复选框位于转发器控件内部，因此我不确定如何处理它。

  Group 1
       Item 1
       Item 2

    Group 2
       Item 3
       Item 4

    Group 3
       Item 5 
       Item 6




  ASPX : 

    <ol>
        <asp:Repeater ID="rp_Groups" runat="server" OnItemDataBound="rp_Groups_ItemDataBound">
            <ItemTemplate>
                <ul>
                    <asp:CheckBox RepeatColumns="2" runat="server" ID="chk_Group" Text='<%# Eval("category_type") %>' Value='<%# Eval("service_type_category_id") %>' onclick="OnGroupClick" />

                     <asp:CheckBoxList runat="server" ID="chkServiceType" style="padding-left:20px" DataValueField="ServiceTypeID" DataTextField="Name" EnableViewState="true"
                     ></asp:CheckBoxList>

                  <br />
                </ul>
            </ItemTemplate>
        </asp:Repeater>
    </ol>

<script type="text/javascript">
    function OnGroupClick(group) { 
  for(item in group.getElementsByTagName('input')) {
     item.checked = group.checked;
  }
}

   function selectAll() {
        $("#<%=chkServiceType.ClientID %> input[type=checkbox]").each(function () {
            this.checked = true;
        })
    }
</script>

Answer 1

您需要按照以下步骤从转发器Itemdatabound事件中添加复选框onclick事件，以调用JavaScript函数。

protected void rp_Groups_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
         try
        {
            System.Web.UI.WebControls.CheckBox chk =  (System.Web.UI.WebControls.CheckBox)e.Item.FindControl("chk_Group");

            chk.Attributes.Add("onclick", "selectGroupAll("+chk.ClientID+");");
        }
         catch (Exception ex)
         {

         }

    }

然后您需要用JavaScript编写函数

1）选择组复选框的功能（我从后面的页面传递了该复选框组的客户端ID。现在，我找到了属于一个组的所有复选框，并将它们选中了。）

function selectGroupAll(chk) {         


            $(chk).parent().parent().find(":checkbox").attr("checked", true);

        }

2）在按钮上选择全部单击

用JavaScript编写函数并从按钮单击事件中调用它

function selectAll() {

            $(':checkbox').each(function () {
                this.checked = true;
            });
        }

按钮形式调用函数

 <input type="button" value="Test" onclick="selectAll();" />