0

リピーター コントロールをバインドすると、チェック ボックスは次のようになります。

ここで 2 つの疑問があります。

  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

JavaScript 関数を呼び出すには、リピーターの Itemdatabound イベントからチェックボックスの onclick イベントを次のように追加する必要があります。

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を渡しています。今、1つのグループに属するすべてのチェックボックスを見つけて、それらをtrueにチェックしています。）

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 に答える