当单选按钮运行于=“服务器”时，使用 jQuery 检查单选按钮？

Question

使用 jQuery 我希望能够单击一个元素，该元素还将检查其相关的单选按钮。我一直工作正常，直到我们必须将 runat="server" 添加到单选按钮。

当我应用这个时，它会阻止我的 jQuery 函数工作，并且我不知道如何绕过它，这是代码的简化版本：

HTML

<input type="radio" runat="server" id="sector1Radio" name="SectorGroup" title="Sector1" />

jQuery

$('#SomethingElse').click(function() {
    $('input[title=Sector1]').attr('checked','checked');
});

我发现当它转换为 .net 控件而不是 check= 时“已检查”（通常是这样）它只是已检查，所以我改变了这一点，但在多个浏览器中检查 DOM 时，我的单选按钮都没有被检查:-(

还有其他方法可以使用 jQuery 来检查吗一个带有 runat="server" 的单选按钮

？

Answer 1

正如其他人所建议的，ASP.net 不会生成具有与您指定的相同 ID 的 html。

快速解决方案：

• 您可以继续使用 id，但要求 jquery 检查 id 的末尾，例如：

  $("input[id$='sector1Radio']").is(":checked");

• 或者根据Nico建议检查标题和名称

• 使用不受ASP.net影响的类元素，例如

  $("input.sector1Radio").is(":checked");

最好的办法是查看生成的 html 代码并查看 id 为您提供的内容，然后您可以使用适当的 jquery 选择器，因为生成的 id 可能具有不同的扩展名，具体取决于您是否使用母版页等。

Answer 2

如果您使用 MasterPage 或动态创建控件，则控件 ID 可能会被重命名为#SomethingElse 变为#MainContent_SomethingElse。

检查这一点的最简单方法是使用 Firefox 或 Chrome 的 WebDeveloper 插件。
转到信息->显示元素信息，然后选择有问题的对象。它会给你它的 ID、类以及祖先和子代信息。
检查 .NET 是否动态更改 ID。

如果是这种情况：

为了防止这种情况，在服务器端代码中，您可以使用以下属性来创建静态 ID，

SomethingElse.ClientIDMode = ClientIDMode.Static;

然后您可以在 jQuery 中引用

$('#SomethingElse').click(function() {
            if ($('input[title=Sector1]').attr('checked')) {
             //execute event
});

Answer 3

我认为发生的情况是，在 ASP NET 复选框和单选按钮中生成一个“输入”和输入后的一个“范围”。所以你只需要选择输入。

您可以尝试：

$('.classname input[type=checkbox]').each(function() {
        this.checked = true;
});

Answer 4

这里有两件事：找到控件并执行检查。在 ASP.NET 中，控件的实际 ID 和名称最终将根据它所在的 runat="server" 容器进行更改，即使这些容器没有 ID。

呈现的 ASP.NET 控件始终以与开始时相同的名称结尾，因此像这样的标记

<input type="radio" runat="server" id="sector1Radio" title="Sector1" />

可能最终呈现为

<input type="radio" runat="server" id="ctl0$ctl0$sector1Radio" name="ctl0_ctl0_SectorGroup" title="Sector1" />

You can find this element，即使在呈现后（如果您在 JQuery 中使用“包含”选择语法）也是如此。因此，要找到此元素，一旦呈现，您可以使用：

$("input[type='radio'][id*='$sector1Radio']")

此语法将查找 id 包含“$sector1Radio”的任何单选按钮

一旦您拥有该元素，您可以使用以下代码来选中或取消选中它，您可以从中调用其他元素的点击事件。

// check the radio button
$("input[type='radio'][id*='$sector1Radio']").attr('checked', true);    

// uncheck the radio button
$("input[type='radio'][id*='$sector1Radio']").attr('checked', false);   

最后一件事...如果您只想在按下时单击按钮的文本块（将其包装在标签中并将 AssociatedControlId 属性设置为单选按钮的控件名称，如下所示...

<input type="radio" runat="server" id="sector1Radio" title="Sector1" />
<asp:label runat="server" id="lblsector1Radio" associatedControlID="sector1Radio">clicking here clicks and unclicks the radio button</asp:label>

Answer 5

我也有同样的问题。要使用 jQuery UI 使您的 radiobuttons 变得漂亮，必须这样写：

<div id="radio">
<input type="radio" id="radio1" runat="server" />
<label for="radio1">The label of the radio button</label>
...
</div>

<script type="text/javascript">
$('#radio').buttonset();
</script>

输入标签的 id 必须由标签的 for 属性正确引用。如果网页位于母版页内，则输入标记的 id 将被修改为类似 ctl00_Something_radio1 的内容，并且标签的 for 属性突然不再引用输入标记。在 ASP.NET 中要小心这一点！

Answer 6

我认为你的问题是输入的id不再是sector1Radio而是ctl00_sector1Radio或类似的东西。如果您的输入控件位于 ContentPlaceHolder 控件内部（使用母版页时），则会发生这种情况。

您可以检查生成的 HTML 代码（在浏览器中）来验证是否是这种情况吗？输入控件的 id 是什么？

如果是这种情况，您需要

$('#SomethingElse').click(function() {
  $('input[title=Sector1]').attr('checked','checked');
});

从代码隐藏生成您的 js jQuery 代码，以便将 SomeThingElse 替换为控件的 ClientID。

Answer 7

.is(':checked') 适用于 ASP.NET 单选按钮和复选框

$('#SomethingElse').click(function() {
    $('input[title=Sector1]').is(':checked');
});

Answer 8

尝试使用

$('input[title=Sector1]').attr('checked',true);

and

$('input[title=Sector1]').attr('checked',false);

或者也许

$('#SomethingElse').click(function () {
    $('input[title=Sector1]').attr('checked',!$('input[title=Sector1]').attr('checked'));
});