Javascript 无法在Asp.Net RadioButtonList项选择上使用Jquery显示/隐藏div？

我有一个asp.net RadioButtonList控件和一个我想使用Jquery根据RadioButtonList选择更改隐藏或显示这些控件。请指导我为什么在中使用相同的代码时无法执行此操作

我的aspx

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"
type = "text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
type = "text/javascript"></script> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel = "Stylesheet" type="text/css" />
<script type="text/javascript">
    $(document).ready(function () {
        $('#rdbrawmtrl input').click(function () {
            var value = $('#rdbrawmtrl input:checked').val();
            if (value == "Cotton") {
                $("#abc").show();
                $("#Panel6").hide();
            }
            if (value == "Wool") {
                $("#Panel6").show();
                $("#abc").hide();
            }
        });
    });
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:RadioButtonList ID="rdbrawmtrl" runat="server" Style="margin: 0 4px 8px 0;">
                            <asp:ListItem>Cotton</asp:ListItem>
                            <asp:ListItem>Wool</asp:ListItem>
                </asp:RadioButtonList>
<div id="abc" runat="server" style="display:none;">
//Some more controls
</div>
<div id="Panel6" runat="server" style="display:none;">
//some more controls
</div>
</asp:Content>

$（文档）.ready（函数（）{
$（'#rdbrawmtrl input'）。单击（函数（）{
var值=$（'#rdbrawmtrl输入：选中'）.val（）；
如果（值=“棉花”）{
$（“#abc”）.show（）；
$（“#Panel6”）.hide（）；
}
如果（值=“羊毛”）{
$（“#Panel6”）.show（）；
$（“#abc”）.hide（）；
}
});
});
棉
羊毛
//更多的控制
//更多的控制

我甚至尝试显示jquery变量“value”，但它没有显示任何结果

<script type="text/javascript">
    $(document).ready(function () {
        $('#rdbrawmtrl input').click(function () {
            var value = $('#rdbrawmtrl input:checked').val();
            alert(value);
        });
    });
</script>

$（文档）.ready（函数（）{
$（'#rdbrawmtrl input'）。单击（函数（）{
var值=$（'#rdbrawmtrl输入：选中'）.val（）；
警报（值）；
});
});

请告诉我哪里做错了

您不能通过javascript中的id直接获取HTML元素。 ASP.net是服务器端语言，Javascript是客户端语言，因此 需要获取客户端ID。试试这个

$（'#'）。单击（函数（）{
//您的代码在这里。。。。
});

您无法检索值，因为您的ASP.NET单选按钮在浏览器中呈现如下：-

<tr>
  <td>
     <input name="rdbrawmtrl" id="rdbrawmtrl_0" type="radio" value="Cotton">
     <label for="rdbrawmtrl_0">Cotton</label>
  </td>
</tr>

<tr>
  <td>
     <input name="rdbrawmtrl" id="rdbrawmtrl_1" type="radio" value="Wool">
     <label for="rdbrawmtrl_1">Wool</label>
  </td>
</tr>

更新：

拥有母版页不仅会动态更改

Id

，还会更改

name

属性。您可以向RadioButton列表添加一个类，如下所示：-

$('input[name="rdbrawmtrl"]').click(function () {
     var value = $(this).val();
     alert(value);
});

<asp:RadioButtonList ID="rdbrawmtrl" runat="server" Style="margin: 0 4px 8px 0;" 
                      CssClass="clsrdbrawmtrl">

$('input[type="radio"]',$('.clsrdbrawmtrl')).click(function () {
     alert($(this).val());
});

我假设

ASP

呈现单选按钮如下

$（“输入[name='rdbrawmtrl']：收音机”）.change（函数（）{
var val=$（this.val（）；
警报（val）；
});

棉
羊毛
我甚至尝试过这个，但仍然没有结果<代码>$（“#输入”）.change（函数（）{var value=$（“#输入：选中”）.val（）；警报（值）；}）感谢Zohaib的建议。您的意思是这样说-
$（'input[name=“rdbrawmtrl”]'）。单击（函数（）{var value=$（'input[name=“rdbrawmtrl”]input:checked'）。val（）；警报（value）；}）这不起作用。仍然不起作用。我受够了这个问题。当我不使用母版页时，即当我在简单HTML页面中编写此代码时，我的代码运行良好。但是它在母版页内容占位符中不起作用。@Omi-与中不起作用？错误是什么？这对我来说很好。谢谢兄弟的支持。实际上没有错误。我已经接受了Zohaib的答案，上面提到的编辑您可以检查。再次感谢你帮助我。@Omi-好的，兄弟。没有问题：）@Ishettyl:我的单选按钮呈现如下：
Cotton
我已经按照你的建议做了，但它也不起作用。@Ishettyl:在按照你的建议做了之后，它给了我一个未捕获的类型错误，上面写着-$（…）。on不是一个函数
$（[input[name='ContentPlaceholder 1\u rdbrawmtrl']：radio”）。on（“change”，函数（）{
这是因为您正在加载两个版本的jQuery（1.4覆盖了1.8.3），您不应该这样做！只使用一个版本，最好是1.8.3。无论如何，我已经编辑了代码来处理这两个版本。@Ishettyl:即使使用了一个库文件，即jQuery/1.8.3/jQuery.min.js，我仍然没有得到任何结果。
$（“输入”）[id^='ContentPlaceHolder1']：radio”）。在（“更改”，函数（）{var val=$（this.val（）；alert（val）；}）；
@Ishettyl:感谢您的支持，我已经接受了Zohaib提交的答案，您可以查看。
$('input[type="radio"]',$('.clsrdbrawmtrl')).click(function () {
     alert($(this).val());
});