无法在 Asp.Net RadioButtonList 项目选择上使用 Jquery show/hide div？

Question

我有一个 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>

我什至尝试显示 jquery 变量 "value" 但它没有显示任何结果。

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

请指导我哪里做错了。

Answer 1

you can not get HTML Element through id in javascript directly. ASP.net is server side language and Javascript is client side so you need to get CLient ID . Try this ..

$('#<%=rdbrawmtrl.ClientID%>').click(function(){
      // your code here ....
});

Answer 2

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

<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 属性上写一个选择器：-

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

更新：

拥有母版页不仅会动态更改 Id，还会动态更改 name 属性。您可以像这样向 RadioButtonList 添加 class：-

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

然后你可以像这样找到它里面的单选按钮:-

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

Answer 3

我假设 ASP 将您的单选按钮呈现如下。

$("input[name='rdbrawmtrl']:radio").change(function() {

    var val = $(this).val();
    alert ( val );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

编辑：根据您的评论，尝试以下操作。

$("input[id^='ContentPlaceHolder1_rdbrawmtrl']:radio").change(function() {

    var val = $(this).val();
    alert ( val );
});

无法在 Asp.Net RadioButtonList 项目选择上使用 Jquery show/hide div？

Not able to show/hide div using Jquery on Asp.Net RadioButtonList item selection?

html

javascript

asp.net

jquery

radiobuttonlist