2

Select Allという名前のチェックボックスがあります。これをクリックすると、Gridview 内の他のすべてのチェック ボックスがオンになります。しかし、グリッド内のチェックボックスのいずれかがオフになると、この Select All Checkbox が自動的にオフになります。これについて私を助けてくれる人はいますか？

ありがとうございました。

4

6 に答える 6

1

これは、クライアント側またはサーバー側で行うことができます

javascript/jquery を使用したクライアント側

チェックボックスは動的に追加されるため、onメソッドを使用してチェックボックスを関数にバインドし、状態が変化したときに起動する必要があります。

$(document).ready(function() {
    $(".checkbox").on("change", function() {
         if(!$(this).is(":checked")){
             $(".selectAll").prop('checked', false);
         }
    });
});

以下は、完全に機能する select All を備えたjsFiddleです。

  • すべて選択 / すべて選択解除
  • いずれかのチェックボックスがオフになっている場合は、[すべて選択] のチェックを外します
  • すべてのチェックボックスにチェックが入っている場合は、[すべて選択] にチェックを入れます

サーバ側

チェックボックスがチェックされていないときにポストバック（ajax）でイベントハンドラーを使用し、すべてのチェックボックスをループしてチェックを外します

Font-end は ajax を使用して部分的なポストバックを実行し、グリッドビューを更新します。すべてのチェックボックスとグリッドビューのチェックボックスを選択すると、ポストバックがトリガーされます。

<asp:UpdatePanel  runat="server">
    <ContentTemplate>
        <asp:GridView ID="gvCheckBoxes" runat="server">
            <Columns>
                <asp:TemplateField >
                    <ItemTemplate>
                        <asp:CheckBox ID="cbCheckBox" OnCheckedChanged="CheckBoxChanged" AutoPostBack="true" runat="server" />
                    </ItemTemplate>
                    /asp:TemplateField>
            </Columns>
        </asp:GridView>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="cbSelectAll"/>
    </Triggers> 
</asp:UpdatePanel>

コードビハインド

select All チェック ボックス イベント ハンドラーは、グリッドビューをループし、チェックボックスを見つけます。すべて選択チェックボックスがチェックされている場合はチェックを入れ、それ以外の場合はチェックを外します

gridview チェックボックス イベント ハンドラーは、チェックボックスをループし、フラグを設定して、すべて選択チェックボックスをオンにするかオフにするかを決定します。チェックボックスのいずれかがチェックされていない場合、ループが存在します。したがって、すべて選択もチェックを外す必要があります

public void SelectAll (Object sender, Eventargs e)
{
    foreach (var row in grid.Rows)
    {
        var checkBox = (CheckBox)row.FindControl("cbCheckBox");
        checkBox.Checked = cbSelectAll.Checked;          
    }
}

public void CheckBoxChanged(Object sender, Eventargs e)
{
    var isSelectAll = true;

    foreach (var row in grid.Rows)
    {
        var checkBox = (CheckBox)row.FindControl("cbCheckBox");

        if(!checkBox.Checked)
        {
            isSelectAll = false;
            break;
        }
    }

    cbSelectAll.Checked = isSelectAll;          
}
于 2013-06-25T16:20:28.827 に答える
0

このコードを見てください。これがあなたを助けることを願っています

<div>
<asp:CheckBox ID="chkSelectAll" runat="server" />
    <asp:GridView ID="GridView1" runat="server">
        <Columns>
            <asp:TemplateField HeaderText="Select">
                <ItemTemplate>
                    <asp:CheckBox ID="chkSelect" runat="server" oncheckedchanged="chkSelect_CheckedChanged" AutoPostBack="true" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>

protected void chkSelect_CheckedChanged(object sender, EventArgs e)
    {
        bool isFound = false;
            foreach (GridViewRow gvr in GridView1.Rows)
            {
                CheckBox chkSelect = gvr.FindControl("chkSelect") as CheckBox;
                if (chkSelect.Checked == false)
                {
                    isFound = true;
                    break;
                }

            }

            if (isFound)
            {
                chkSelectAll.Checked = false;
            }
            else
            {
                chkSelectAll.Checked = true;

            }
    }
于 2013-06-25T16:37:46.123 に答える
0

私が考えることができる最善の方法は、GridViewCheckBoxFieldをTemplateField. 次に、新しいものをイベントに接続しますasp:CheckBox。コード ビハインドでは、CheckedChanged イベントを処理し、チェックボックスのいずれかがオフに変更されたときに、「すべてチェック」チェックボックスを切り替えることができます。TemplateFieldCheckedChanged

于 2013-06-25T16:22:10.420 に答える
-1

ユーザーがグリッドの子行のチェックを外した場合、上記のコードを修正しました。グリッド ヘッダーは自動的にオフになります。

    <script type="text/javascript">
    function UncheckHeader(headerchk) {
        var gvcheck = document.getElementById('gvdetails');
            var inputs = gvcheck.rows[0].getElementsByTagName('input');
            inputs[0].checked = false;
    }
    function SelectAll(headerchk) {
        var gvcheck = document.getElementById('gvdetails');
        var i;
      //  if true checked all checkboxes
        if (headerchk.checked) {
            for (i = 0; i < gvcheck.rows.length; i++) {
                var inputs = gvcheck.rows[i].getElementsByTagName('input');
                inputs[0].checked = true;
            }
        }
            //if condition fails uncheck all checkboxes in gridview
        else {
            for (i = 0; i < gvcheck.rows.length; i++) {
                var inputs = gvcheck.rows[i].getElementsByTagName('input');
                inputs[0].checked = false;
            }
        }
    }
</script>
<asp:GridView ID="gvdetails" runat="server" >
        <Columns>
            <asp:TemplateField>
                <HeaderTemplate>
                    <asp:CheckBox ID="chkheader" runat="server" onclick="javascript:SelectAll(this)" />
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="chkchild"    runat="server" onclick="javascript:UncheckHeader(this)" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

詳細はこちら

于 2016-06-01T15:53:49.500 に答える