-1

チェックボックスを含む行を持つグリッドビューがあります。グリッドビューの下にボタンがあります。クリックすると、クライアント側からすべてのチェックボックスを選択したいと思います。これまでのところ、OnClientClick、javascript などについて読んできましたが、コードが機能しません。誰か助けてくれませんか？

注：ヘッダーのチェックボックスを選択するチェックボックスを選択したくありません（これについて多くの例を見つけました）が、グリッドビューの外側のボタンをクリックします

 <asp:GridView runat="server"  ID="MyGridView" EnableViewState="true" 
    AutoGenerateColumns="False" 
    ><AlternatingRowStyle BackColor="White" />

    <Columns>

    <asp:TemplateField HeaderText="Select" SortExpression="Select" ItemStyle-HorizontalAlign="Center" >
                <EditItemTemplate>
                    <asp:CheckBox ID="CkBoxSelectET" runat="server" /></EditItemTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="CkBoxSelectIT" runat="server" /></ItemTemplate>
       </asp:TemplateField>

       <asp:TemplateField HeaderText="Name" SortExpression="Name" ItemStyle-HorizontalAlign="Center" Visible="false" >
                <ItemTemplate>
                    <asp:Label ID="name" runat="server" Text='<%# Bind("Name") %>' Visible="false" /></ItemTemplate>
        </asp:TemplateField>

        <asp:TemplateField HeaderText="City" SortExpression="City" ItemStyle-HorizontalAlign="Left" >
                <ItemTemplate>
                    <asp:Label ID="lblCity" runat="server" /></ItemTemplate>
        </asp:TemplateField>

    </Columns>
    </asp:GridView>

<asp:Button runat="server" ID="btnSelect" Text="Select all" BackColor="LightGray" OnClientClick="SelectAll(id);" />

<script type="text/javascript">

var gridViewControl = document.getElementById('<%= MyGridView.ClientID %>');

function SelectAll(id) {
    for (i = 0; i < gridViewControl.elements.length; i++) {
        if (gridViewControl.elements[i].type == "checkbox") {
            gridViewControl.elements[i].checked = document.getElementById(id).checked;
        }
    }
}

C# で、データをバインドするとき:

 btnSelect.Attributes.Add("OnClientClick", "javascript:SelectAll('" + btnSelect.ClientID + "')");
4

4 に答える 4

1

jQueryを使用して、これを完全にクライアント側で行うことをお勧めします。新しい ASP.NET は、要素の ID をあなたが命名した方法でレンダリングすると想定しているので、それらを使用します。(このように ID をレンダリングする設定が ASP.NET にあると思います)

jQuery を含めた後、HTML コードの最後に配置できるサンプル コードを次に示します。

<script>
    $("#btnSelect").click(function(event) {
        event.preventDefault();
        $("#MyGridView").find("[type='checkbox']").prop('checked', true);
    });
</script>

これにより、GridView コンテナー要素のレンダリングされた ID が "MyGridView" であると仮定して、GridView 内のチェックボックスのみが選択およびチェックされます。

于 2013-03-07T15:21:27.030 に答える
1

「私のボタンが「チェックされている」場合（これは、渡したIDに対応する要素です）、このチェックボックスをチェックしてください」と言っているようです。ボタンはチェックできないので、うまくいきません。

また、「このボタンをクリックすると、この Javascript を呼び出して変数の値を渡す」とも言っていますid。しかしid、その文脈では定義されていません。

すべてのチェックボックスを選択するだけで、すべてをオン/オフに切り替えたくない場合は、次のコードが機能するはずです。

HTML:

<button id="btnSelect" type="button" onclick="SelectAll" >Select All</button>

JavaScript の場合:

var gridViewControl = document.getElementById('<%= MyGridView.ClientID %>');

function SelectAll() {
    for (i = 0; i < gridViewControl.elements.length; i++) {
        if (gridViewControl.elements[i].type == "checkbox") {
            gridViewControl.elements[i].checked = true;
        }
   }

}

C# コードはまったく必要ありません。

于 2013-03-07T14:48:47.713 に答える
0

最後に解決策を見つけましたが、うまくいきました。@Ann L.のソリューションを少し修正しました。

function SelectAll() {

    var frm = document.forms['aspnetForm'];

    for (var i = 0; i < document.forms[0].length; i++) {
        if (document.forms[0].elements[i].id.indexOf('CkBoxSelectIT') != -1) {

                document.forms[0].elements[i].checked = true

        }
    }
}
于 2013-03-11T08:45:53.923 に答える