Question

我有一个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”，则应从所有其他复选框中删除checked属性，如果选择了任何其他复选框，则应删除“ALL”的已检查属性。我想用javascript实现这一点，但最好是在jQuery中实现。如果你知道怎么做，请回复。帮助将不胜感激。

Answer 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处的复选框。

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

Answer 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/

使用Javascript进行ASP.NET Checkboxlist验证

3 个答案: