0

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

我在这里有两个疑问：

  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>
4

1 回答 1

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();" />
于 2013-04-05T07:25:01.243 回答