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

ASP.NET Checkboxlist validation using Javascript

本文关键字：复选框 列表 验证 NET ASP Javascript 使用      更新时间：2023-09-26

我有一个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。如果你知道怎么做，请回复。我们将不胜感激。

这是我的解决方案：

$("#<%=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处的复选框。

试试这个：

标记：

<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);
    });
});

创建一个事件处理程序，用于管理所有复选框上的单击，并捕获所需的用户行为。

如果您获取这些代码，并在呈现的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/

相关文章：