JQuery 和 ASP：RadioButton 和 .change() 不起作用答案

【问题标题】：JQuery and ASP:RadioButton and .change() not workingJQuery 和 ASP：RadioButton 和 .change() 不起作用
【发布时间】：2011-03-29 21:55:05
【问题描述】：

找到了一个类似的问题，但它没有解决我的问题。当用户选择 RadioButton 时，我正在尝试调用 .change() 事件来显示一些隐藏的文本。

我在 JSFiddle 中尝试过，它适用于普通表单，但似乎无法让它适用于我的 ASP.NET 表单。

原始代码 -- http://jsfiddle.net/pJgyu/8226/（当您单击是或否时，它会显示或隐藏该段落）。

我的 ASP 代码 --

<asp:RadioButton ID="RadioButton1" runat="server" Text="Yes" GroupName="RadioGroup1" />    <br /></p>
<asp:RadioButton ID="RadioButton2" runat="server" Text="No" GroupName="RadioGroup1" />      

<p style="display: none">testing 1...2...3...</p>

当我启动我的 JQuery 代码时 -

$("input:radio").change(function ()
  $("p").toggle("slow");
});

并将“input:radio”更改为 #RadioButton1（或 2），甚至没有任何反应。

那么，我做错了什么？我是一个 JQuery 整体 ASP.NET 菜鸟。 :)

感谢任何方向/指针/提示。

【问题讨论】：

您能否发布您的asp.net 应用程序呈现的HTML，我想知道asp.net 呈现的ID 是否是您所期望的。
你能发布更多你的asp和jquery代码吗？在您的 asp.net 代码中，在第一个单选按钮之后有一个额外的关闭 <p/>，这是有意的吗？
Hey moose-in-the-jungle - 是的，我在我的应用程序中删除了它。有一些额外的东西挂在周围。确实得到了马克的回答（见下文）。

标签： jquery asp.net radio-button

【解决方案1】：

尝试将文档中的所有内容都准备好

$(function() {
  $( "#accordion" ).accordion();
  $("input:radio").change(function () {
     $("p").toggle("slow");
   });
});

您在 jsfiddle 上的现有代码正在运行，因为您选择让 jsfiddle 将所有内容包装在 $(window).load() 中

【讨论】：

马克 - 太棒了！就是这样。现在就像一个魅力。非常感谢。不敢相信这是这么简单的事情。 :) 我想我需要阅读更多的 JQuery 文档。

【解决方案2】：

这段代码对我有用！。测试:)

<asp:RadioButton ID="RadioButton1" runat="server" Text="Yes" GroupName="RadioGroup1" />        
<br/>
<asp:RadioButton ID="RadioButton2" runat="server" Text="No" GroupName="RadioGroup1" />      

<p style="display: none">testing 1...2...3...</p>  


<script type="text/javascript">
   $(document).ready(function () {
        $("input:radio").change( function (){
            $("p").toggle("slow");
        });
    });
</script>

【讨论】：

【解决方案3】：

这可能与 asp.net 在呈现控件时实际分配给您的控件的 ClientID 值有关。

$(function(){

    var radioButton1 = '<%= RadioButton1.ClientID %>';
    var radioButton2 = '<%= RadioButton2.ClientID %>';

    $(radioButton1).change(function ()
      $("p").toggle("slow");
    });

    $(radioButton2 ).change(function ()
      $("p").toggle("slow");
    });
});

【讨论】：

【解决方案4】：

你也可以获取点击事件，有时候这是一个不错的选择

$("input:radio").click(function(){
    //yout code here
});

【讨论】：