使用 Javascript 的 ASP.NET 复选框列表验证答案

【问题标题】：ASP.NET Checkboxlist validation using Javascript使用 Javascript 的 ASP.NET 复选框列表验证
【发布时间】：2013-07-20 00:43:46
【问题描述】：

我有一个 asp.net 复选框列表如下：

<asp:CheckBoxList ID="cblCurrency" runat="server">
    <asp:ListItem Text="ALL" Value="0"></asp:ListItem>
    <asp:ListItem Text="A" Value="1"></asp:ListItem>
    <asp:ListItem Text="B" Value="2"></asp:ListItem>
    <asp:ListItem Text="C" Value="3"></asp:ListItem>
    <asp:ListItem Text="D" Value="4"></asp:ListItem>
</asp:CheckBoxList>

要求是，如果选择“ALL”，则应从所有其他复选框中删除选中的属性，如果选中任何其他复选框，则应删除“ALL”的选中属性。我想使用 javascript 来实现这一点，但最好是在 jQuery 中。如果您知道该怎么做，请回复。帮助将不胜感激。

【问题讨论】：

什么是“全部”？是另一个复选框吗？
是的。它是如上所示的第一个复选框。
你能把“ALL”作为一个单独的复选框吗？外部 cblCurrency 具有不同的 ID？

标签： javascript jquery asp.net checkboxlist

【解决方案1】：

这是我的解决方案：

$("#<%=cblCurrency.ClientID%> input").click(function () {
    if ($('<%= "#" + cblCurrency.ClientID + "_0" %>').is(":checked")) {
        $("#<%=cblCurrency.ClientID%> input:checkbox").not(this).prop("checked", false);
    }
});

基本上，我们利用了由 ASP.NET 生成并用于最后的 ID 属性的复选框的索引。像这个：cblCurrency_1，表示索引 1 处的复选框。

【讨论】：

【解决方案2】：

试试这个：

标记：

<asp:CheckBoxList ID="cblCurrency" runat="server" CssClass="CheckBoxList" ClientIDMode="Static">
    <asp:ListItem Text="ALL" Value="0"></asp:ListItem>
    <asp:ListItem Text="A" Value="1"></asp:ListItem>
    <asp:ListItem Text="B" Value="2"></asp:ListItem>
    <asp:ListItem Text="C" Value="3"></asp:ListItem>
    <asp:ListItem Text="D" Value="4"></asp:ListItem>
</asp:CheckBoxList>

JavaScript：

$(document).ready(function () {
    $(".CheckBoxList input:checkbox:first").change(function () {
        $(".CheckBoxList").find(':checkbox').prop("checked", this.checked);
    });

    $(".CheckBoxList input:checkbox:not(first)").change(function () {
        $(".CheckBoxList").find(':checkbox:first').prop("checked", this.checked);
    });
});

【讨论】：

感谢此代码。然而，在选择“全部”时似乎似乎没有工作。它选择所有复选框。
哦，好吧，我看错了你的要求。我很好奇为什么您不希望 ALL 实际检查所有这些，这通常是大多数用户界面的工作方式（即 GMail 选择所有消息）。如果您确实想要您描述的那种交互类型，那么您最好制作一个相互排斥的控件，例如单选按钮，让用户决定他们是否想要全部，如果他们选择他们不想要全部，那么它将显示复选框让他们决定他们想要或不想要什么。如果我是您系统的新用户，我会认为您的用户界面已损坏。只是我的两分钱。

【解决方案3】：

创建一个事件处理程序来管理对所有复选框的点击，并捕获您想要的用户行为。

如果您使用此代码，并在呈现的 HTML 上查看源代码，我们会得到：

    <table id="MainContent_cblCurrency">
    <tr>
        <td><input id="MainContent_cblCurrency_0" type="checkbox" name="ctl00$MainContent$cblCurrency$0" value="0" /><label for="MainContent_cblCurrency_0">ALL</label></td>
    </tr><tr>
        <td><input id="MainContent_cblCurrency_1" type="checkbox" name="ctl00$MainContent$cblCurrency$1" value="1" /><label for="MainContent_cblCurrency_1">A</label></td>
    </tr><tr>
        <td><input id="MainContent_cblCurrency_2" type="checkbox" name="ctl00$MainContent$cblCurrency$2" value="2" /><label for="MainContent_cblCurrency_2">B</label></td>
    </tr><tr>
        <td><input id="MainContent_cblCurrency_3" type="checkbox" name="ctl00$MainContent$cblCurrency$3" value="3" /><label for="MainContent_cblCurrency_3">C</label></td>
    </tr><tr>
        <td><input id="MainContent_cblCurrency_4" type="checkbox" name="ctl00$MainContent$cblCurrency$4" value="4" /><label for="MainContent_cblCurrency_4">D</label></td>
    </tr>
</table>

它并不漂亮，但它是我们必须使用的。

这个 JS 将捕获所有复选框的点击。它根据包含表的 ID 定位复选框。如果是“全部”复选框被选中（基于选中输入的值），它将取消选中所有当前选中的复选框：

$().ready(
        function () {
            $("#<%=cblCurrency.ClientID%> input").click( // The ClientID property should tell you that the ID if the table is  
                function () {
                    var eventSource = $(this); //The checkbox that was clicked
                    //for debugging Delete once you get working                    
                    //console.log(eventSource.val())
                    //console.log(eventSource.is(':checked'))

                    if (eventSource.val() == "0" && eventSource.is(':checked')) { // Make sure the value is what you expect and that the check box is being checked (and not unchecked)
                        $("#<%=cblCurrency.ClientID%> input").not(eventSource).prop('checked', false)// uncheck all other checkbox. exclude the input that is the source of the event.

                    }
                }
            )
        }
            );

这里有一个版本： http://jsfiddle.net/RGW4Q/

【讨论】：