如何使用vb.net選中和取消選中按鈕單擊上的所有復選框？

Question

我的網絡表單中有5個復選框。

我有button1，其文本為全選...。

我想當button1文本全部選中時，然后單擊按鈕，然后將選中所有復選框，而button1文本將全部取消選中....如果按鈕文本未全部選中，則所有復選框都不會選中...

如何使用vb.net做到這一點？

Answer 1

這樣的事情應該得到它

ASPX：

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Button ID="Button1" runat="server" Text="Check All" />
        <asp:CheckBoxList ID="CheckBoxList1" runat="server">
            <asp:ListItem Text="apple" Value="apple" />
            <asp:ListItem Text="banana" Value="banana" />
            <asp:ListItem Text="grapes" Value="grapes" />
            <asp:ListItem Text="kiwi" Value="kiwi" />
            <asp:ListItem Text="orange" Value="orange" />
        </asp:CheckBoxList>
    </ContentTemplate>
</asp:UpdatePanel>

VB.NET：

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
    Dim toggle As Boolean = True
    If Button1.Text = "Check All" Then
        Button1.Text = "Uncheck All"
    Else
        Button1.Text = "Check All"
        toggle = False
    End If

    For Each li As ListItem In CheckBoxList1.Items
        li.Selected = toggle
    Next
End Sub

另外，您可以輕松做到這一點客戶端jQuery

就像是

$('#Button1').click(function() {
    var toggle = true;
    if ($(this).val() === "Check All") {
        $(this).val("Uncheck All");
    } else {
        $(this).val("Check All");
        toggle = false;
    }
    $('.myCheckBoxes :checkbox').attr("checked", toggle);
});

Answer 2

我建議為此使用jQuery。 您的ASPX文件中將需要以下內容：

<script type="text/javascript">
    $(function() {
        $(".select-all-button").click(function() {
            var any = ($(".cb > input:checked").length > 0);
            $(".cb > input").attr("checked", !any);
        });
    });
</script>

<asp:Button ID="SelectAllButton" Text="Select All" CssClass="select-all-button" runat="server"/><br/><br/>

<asp:CheckBox ID="CheckBox1" CssClass="cb" Text="CheckBox 1" runat="Server" /><br/>
<asp:CheckBox ID="CheckBox2" CssClass="cb" Text="CheckBox 2" runat="Server" /><br/>
<asp:CheckBox ID="CheckBox3" CssClass="cb" Text="CheckBox 3" runat="Server" /><br/>
<asp:CheckBox ID="CheckBox4" CssClass="cb" Text="CheckBox 4" runat="Server" /><br/>
<asp:CheckBox ID="CheckBox5" CssClass="cb" Text="CheckBox 5" runat="Server" /><br/>