使用 jQuery 检查 ASP.NET 复选框

Check ASP.NET checkbox with jQuery

提问by Ye Myat Aung

I have following ASP.NET server control checkboxes.

我有以下 ASP.NET 服务器控件复选框。

<asp:checkbox id="chkMonS1" runat="server" />
<asp:checkbox id="chkMonS2" runat="server" />
<asp:checkbox id="chkAllMon" runat="server" />

And also other check boxes.

还有其他复选框。

<asp:checkbox id="chkTueS1" runat="server" />
<asp:checkbox id="chkTueS2" runat="server" />
<asp:checkbox id="chkAllTue" runat="server" />

So I tried to use jQuery to select all check boxes like so..

所以我尝试使用 jQuery 来选择所有复选框，就像这样..

<script type="text/javascript">
        $('chkAllMon').click(
        function () {
            $('chkMonS1').attr('checked', true)
            $('chkMonS2').attr('checked', true)
        }
        )
    </script>

However, it doesn't work. Where did it go wrong?

但是，它不起作用。哪里出错了？

回答by SquidScareMe

you're trying to use the server-side id on the client. it should look something like this:

您正在尝试在客户端上使用服务器端 ID。它应该是这样的：

$('#<%=chkAllMon.ClientID %>').click(
        function () {
            $('#<%=chkMonS1.ClientID %>').attr('checked', true)
            $('#<%=chkMonS2.ClientID %>').attr('checked', true)
        }

Explanation: ASP.NET IDs are the id you see on the server. When ASP.NET controls render to html they are given another id.

说明：ASP.NET ID 是您在服务器上看到的 ID。当 ASP.NET 控件呈现为 html 时，它们会被赋予另一个 id。

回答by ChessWhiz

If you are using ASP.NET 4.0 or newer, this is easy to fix.

如果您使用的是 ASP.NET 4.0 或更新版本，这很容易修复。

First, you need a #symbol in your jQuery selectors, like this: $('#chkMonS1').

首先，你需要一个#符号在你的jQuery选择，如：$('#chkMonS1')。

Also, you'll need to set ClientIdMode="Static"in the ASP.NET elements, as shown below. This will set the HTML idto the same value as the ASP.NET id. See this articlefor the reason why.

此外，您还需要ClientIdMode="Static"在 ASP.NET 元素中进行设置，如下所示。这会将 HTML 设置id为与 ASP.NET 相同的值id。原因请看这篇文章。

<asp:checkbox id="chkAllTue" runat="server" ClientIDMode="Static" />

<asp:checkbox id="chkAllTue" runat="server" ClientIDMode="Static" />

回答by Marek Karbarz

The Ids for the checkboxes will be very different on the client side (with all their placeholders etc.) so jQuery is simply not finding them. There are a few solutions you could try:

复选框的 ID 在客户端（及其所有占位符等）会有很大不同，因此 jQuery 根本找不到它们。您可以尝试以下几种解决方案：

1. If the script is on the same page you could embed ClientId using C# like so:

   $('#<%= chkMonS1.ClientId %>').attr("checked", true)

2. If the script is embedded in an external file, and you're using ASP.NET 4.0 you can change the ClientIDMode to "Static" and you can use the exact Ids of your checkboxes (see more here http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx)

3. You could try this jquery selector to find a given checkbox (since the client ID is always going to end with the ID you assigned despite of what ASP.NET adds to the front of it; this could be dangerous if you're using the same IDs in different naming containers though):

   $('input[id$='chkMonS1']').attr("checked", true)

1. 如果脚本在同一页面上，您可以使用 C# 嵌入 ClientId，如下所示：

   $('#<%= chkMonS1.ClientId %>').attr("checked", true)

2. 如果脚本嵌入在外部文件中，并且您使用的是 ASP.NET 4.0，您可以将 ClientIDMode 更改为“静态”，并且您可以使用复选框的确切 ID（在此处查看更多信息http://msdn.microsoft. com/en-us/library/system.web.ui.control.clientidmode.aspx）

3. 您可以尝试使用此 jquery 选择器来查找给定的复选框（因为客户端 ID 总是以您分配的 ID 结尾，而不管 ASP.NET 在其前面添加了什么；如果您使用相同的不同命名容器中的 ID）：

   $('input[id$='chkMonS1']').attr("checked", true)

回答by Kev

If this is ASP.NET 2.0 then you need to use the server generated ID:

如果这是 ASP.NET 2.0，那么您需要使用服务器生成的 ID：

<script type="text/javascript">
    $('#<%=chkAllMon.ClientID%>').click(
    function () {
        $('#<%=chkMonS1.ClientID%>').attr('checked', true)
        $('#<%=chkMonS2.ClientID%>').attr('checked', true)
    }
    )
</script>

If it's ASP.NET 4.0 then see ChessWiz's answer.

如果是 ASP.NET 4.0，请参阅ChessWiz 的回答。

回答by Eli

You need a hash to select by id:

您需要一个哈希值来按 id 选择：

$('#chkAllMon').click(function () {
    $('#chkMonS1').attr('checked', true)
    $('#chkMonS2').attr('checked', true)
});