[英]Not able to show/hide div using Jquery on Asp.Net RadioButtonList item selection?
我有一个asp.net RadioButtonList控件,并且我想根据使用Jquery的RadioButtonList选择更改来隐藏或显示这些控件。 请指导我为什么在使用与in相同的代码时无法执行此操作
我的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>
请指导我哪里做错了。
您无法直接通过javascript中的id获取HTML元素。 ASP.net是服务器端语言,而Javascript是客户端,因此您需要获取CLient ID。 尝试这个 ..
$('#<%=rdbrawmtrl.ClientID%>').click(function(){
// your code here ....
});
我假设 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 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中:
<asp:RadioButtonList ID="rdbrawmtrl" runat="server" Style="margin: 0 4px 8px 0;"
CssClass="clsrdbrawmtrl">
然后,您可以找到其中显示的单选按钮,如下所示:-
$('input[type="radio"]',$('.clsrdbrawmtrl')).click(function () {
alert($(this).val());
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.