当单选按钮为runat =“服务器”时使用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="checked"（通常是这样）时，它只是 Checked，所以我改变了它，但是在多个浏览器中检查 DOM 时，没有正在检查我的单选按钮:-(

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

干杯！

Answer 1

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

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

如果是这种情况，你需要生成你的 js jQuery 代码

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

来自代码隐藏，以便将 SomeThingElse 替换为控件的 ClientID。

Answer 2

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

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

Answer 3

尝试使用

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

和

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

或许

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

Answer 4

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

快速解决方案：

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

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

• 或者按照 Nico 的建议检查标题和名称

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

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

最好的办法是查看生成的html代码，看看id给你什么，然后你可以使用合适的jquery选择器，因为生成的id可能有不同的扩展名，取决于你是否使用母版等。

Answer 5

如果您使用 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 6

我认为在 ASP NET 中复选框和单选按钮会在输入后生成一个“输入”和一个“跨度”。所以你只需要选择输入。

你可以试试：

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

Answer 7

这里有两件事：找到控件并执行检查。在 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" />

如果您在 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 8

我遇到了同样的问题。要使用 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 中注意这一点！