1

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

4

3 回答 3

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

于 2013-07-20T03:03:11.793 回答
0

尝试这个：

标记：

<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);
    });
});
于 2013-07-20T02:28:49.160 回答
0

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

如果您使用此代码，并在呈现的 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/

于 2013-07-20T02:38:33.220 回答