使用jQuery从asp:RadioButtonList读取选定的值

我有类似于下面的代码…

<p><label>Do you have buffet facilities?</label> <asp:RadioButtonList ID="blnBuffetMealFacilities:chk" runat="server"> <asp:ListItem Text="Yes" Value="1"></asp:ListItem> <asp:ListItem Text="No" Value="0"></asp:ListItem> </asp:RadioButtonList></p> <div id="HasBuffet"> <p><label>What is the capacity for the buffet?</label> <asp:RadioButtonList ID="radBuffetCapacity" runat="server"> <asp:ListItem Text="Suitable for upto 30 guests" value="0 to 30"></asp:ListItem> <asp:ListItem Text="Suitable for upto 50 guests" value="30 to 50"></asp:ListItem> <asp:ListItem Text="Suitable for upto 75 guests" value="50 to 75"></asp:ListItem> <asp:ListItem Text="Suitable for upto 100 guests" value="75 to 100"></asp:ListItem> <asp:ListItem Text="Suitable for upto 150 guests" value="100 to 150"></asp:ListItem> <asp:ListItem Text="Suitable for upto 250 guests" value="150 to 250"></asp:ListItem> <asp:ListItem Text="Suitable for upto 400 guests" value="250 to 400"></asp:ListItem> </asp:RadioButtonList></p> </div> 

当收音机列表blBuffetMealFacilities:chk更改客户端并在jQuery的HasBuffet div上执行滑动下拉function时,我想捕获一个事件。 什么是最好的方式来创build这个,记住有几个类似的部分在网页上,我想要显示的问题取决于在电台列表中是否回答。

这个:

 $('#rblDiv input').click(function(){ alert($('#rblDiv input').index(this)); }); 

会得到单击单选button的索引(我想,未经testing)(请注意,您必须将您的RBL包装在#rblDiv

你可以用它来显示相应的div,像这样:

 $('.divCollection div:eq(' + $('#rblDiv input').index(this) +')').show(); 

这是你的意思吗?

编辑:另一种方法是给rbl一个类名,然后去:

 $('.rblClass').val(); 

检索RadioButtonList1的检查值的简单方法是:

 $('#RadioButtonList1 input:checked').val() 

蒂姆编辑:

RadioButtonList1必须是RadioButtonList1的ClientID

 var rblSelectedValue = $("#<%= RadioButtonList1.ClientID %> input:checked"); 

这对我工作…

 <asp:RadioButtonList runat="server" ID="Intent"> <asp:ListItem Value="Confirm">Yes!</asp:ListItem> <asp:ListItem Value="Postpone">Not now</asp:ListItem> <asp:ListItem Value="Decline">Never!</asp:ListItem> </asp:RadioButtonList> 

处理程序:

 $(document).ready(function () { $("#<%=Intent.ClientID%>").change(function(){ var rbvalue = $("input[name='<%=Intent.UniqueID%>']:radio:checked").val(); if(rbvalue == "Confirm"){ alert("Woohoo, Thanks!"); } else if (rbvalue == "Postpone"){ alert("Well, I really hope it's soon"); } else if (rbvalue == "Decline"){ alert("Shucks!"); } else { alert("How'd you get here? Who sent you?"); } }); }); 

重要的部分: $(“input [name ='<%= Intent.UniqueID%>']:radio:checked”)。val();

一个单选button列表,而不是一个单选button创build唯一的id标签name_0,name_1等一个简单的方法来testingselect是通过分配一个CSS类

 var deliveryService; $('.deliveryservice input').each(function () { if (this.checked) { deliveryService = this.value } 

据我说,这将是罚款…

试试这个

  var GetValue=$('#radiobuttonListId').find(":checked").val(); 

要存储在GetValue(variables)上的Radiobuttonlist值。

尝试这个:

 $("input[name='<%=RadioButtonList1.UniqueID %>']:checked").val() 

以下是我们最终创build的代码。 首先是一个简单的解释。 我们使用“q_”作为包裹在单选button问题列表中的div名称。 然后我们有任何部分的“s_”。 下面的代码遍历问题来查找检查的值,然后在相关部分上执行幻灯片操作。

 var shows_6 = function() { var selected = $("#q_7 input:radio:checked").val(); if (selected == 'Groom') { $("#s_6").slideDown(); } else { $("#s_6").slideUp(); } }; $('#q_7 input').ready(shows_6); var shows_7 = function() { var selected = $("#q_7 input:radio:checked").val(); if (selected == 'Bride') { $("#s_7").slideDown(); } else { $("#s_7").slideUp(); } }; $('#q_7 input').ready(shows_7); $(document).ready(function() { $('#q_7 input:radio').click(shows_6); $('#q_7 input:radio').click(shows_7); }); <div id="q_7" class='question '><label>Who are you?</label> <p> <label for="ctl00_ctl00_ContentMainPane_Body_ctl00_ctl00_chk_0">Bride</label> <input id="ctl00_ctl00_ContentMainPane_Body_ctl00_ctl00_chk_0" type="radio" name="ctl00$ctl00$ContentMainPane$Body$ctl00$ctl00$chk" value="Bride" /> </p> <p> <label for="ctl00_ctl00_ContentMainPane_Body_ctl00_ctl00_chk_1">Groom</label> <input id="ctl00_ctl00_ContentMainPane_Body_ctl00_ctl00_chk_1" type="radio" name="ctl00$ctl00$ContentMainPane$Body$ctl00$ctl00$chk" value="Groom" /> </p> </div> 

以下允许我们强制这个问题…

 <script type="text/javascript"> var mandatory_q_7 = function() { var selected = $("#q_7 input:radio:checked").val(); if (selected != '') { $("#q_7").removeClass('error'); } }; $(document).ready(function() { $('#q_7 input:radio').click(function(){mandatory_q_7();}); }); </script> 

这里是一个实际的显示/隐藏层的例子

 <div class="section" id="s_6"> <h2>Attire</h2> ... </div> 

试试下面的代码:

 <script type="text/javascript"> $(document).ready(function () { $(".ratingButtons").buttonset(); }); </script> <asp:RadioButtonList ID="RadioButtonList1" RepeatDirection="Horizontal" runat="server" AutoPostBack="True" DataSourceID="SqlDataSourceSizes" DataTextField="ProdSize" CssClass="ratingButtons" DataValueField="_ProdSizeID" Font-Size="X-Small" ForeColor="#666666"> </asp:RadioButtonList> 

为什么如此复杂?

 $('#id:checked').val(); 

将工作得很好!

安德鲁·布洛克解决scheme工作得很好,我只是想告诉你我的,并添加一个警告。

//很好用

 $('#<%= radBuffetCapacity.ClientID %> input').click(function (e) { var val = $('#<%= radBuffetCapacity.ClientID %>').find('input:checked').val(); //Do whatever }); 

/ /警告 – 在Firefox中工作,但不是IE8 ..使用这一段时间之前,注意到它在IE8中没有工作…用于一切工作在所有浏览器与jQuery的一切工作。

 $('#<%= radBuffetCapacity.ClientID %>').change(function (e) { var val = $('#<%= radBuffetCapacity.ClientID %>').find('input:checked').val(); //Do whatever }); 

我投赞成文的答案来获得价值。

如果你需要find相应的标签,你可以使用这个代码:

$('#ClientID' + ' input:checked').parent().find('label').text()

对于我的情况,我的JS是在一个单独的文件,所以使用ClientID响应输出是不利的。 令人惊讶的是,解决scheme就像添加一个CssClass到RadioButtonList一样简单,我在DevCurry上find

随着解决scheme消失,添加一个类到您的单选button列表

 <asp:RadioButtonList id="rbl" runat="server" class="tbl">... 

正如文章指出的那样,当单选button列表被呈现时,类“tbl”被附加到周围的表

 <table id="rbl" class="tbl" border="0"> <tr>... 

现在由于已经附加了CSS类,你可以在表中引用input:radio项,基于css类select器

 $(function () { var $radBtn = $("table.tbl input:radio"); $radBtn.click(function () { var $radChecked = $(':radio:checked'); alert($radChecked.val()); }); }); 

再一次,这避免了使用上面提到的“ClientID”,我发现我的场景凌乱。 希望这可以帮助!

我发现一个简单的解决scheme,试试这个:

 var Ocasiao = ""; $('#ctl00_rdlOcasioesMarcas input').each(function() { if (this.checked) { Ocasiao = this.value } });