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

Reading the selected value from asp:RadioButtonList using jQuery

提问by digiguru

I've got code similar to the following...

我有类似于以下的代码...

<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>

I want to capture an event when the radio list blBuffetMealFacilities:chk changes client side and perform a slide down function on the HasBuffet div from jQuery. What's the best way to create this, bearing in mind there are several similar sections on the page, where I want questions to be revealed depending on a yes no answer in a radio list.

我想在单选列表 blBuffetMealFacilities:chk 更改客户端并从 jQuery 在 HasBuffet div 上执行向下滑动功能时捕获一个事件。创建此内容的最佳方法是什么，请记住页面上有几个类似的部分，我希望根据广播列表中的“是”或“否”答案来揭示问题。

采纳答案by Andrew Bullock

this:

这个：

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

will get you the index of the radio button that was clicked (i think, untested) (note you've had to wrap your RBL in #rblDiv

将为您提供单击的单选按钮的索引（我认为，未经测试）（请注意，您必须将 RBL 包装在 #rblDiv 中

you could then use that to display the corresponding div like this:

然后，您可以使用它来显示相应的 div，如下所示：

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

Is that what you meant?

这是你的意思吗？

Edit: Another approach would be to give the rbl a class name, then go:

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

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

回答by Vinh

The simple way to retrieve checked value of RadioButtonList1 is:

检索 RadioButtonList1 的选中值的简单方法是：

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

Edit by Tim:

蒂姆编辑：

where RadioButtonList1must be the ClientID of the RadioButtonList

其中RadioButtonList1必须是 RadioButtonList 的 ClientID

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

回答by Andrew Bullock

This worked for me...

这对我有用...

<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>

The handler:

处理程序：

$(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?");
   }
  });
});

The important part: $("input[name='<%=Intent.UniqueID%>']:radio:checked").val();

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

回答by azarudeen

According to me it'll be working fine...

据我说它会正常工作......

Just try with this

试试这个

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

---

---

The Radiobuttonlist value to be stored on GetValue(Variable).

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

回答by Stephen Montgomery

A Radio Button List instead of a Radio button creates unique id tags name_0, name_1 etc. An easy way to test which is selected is by assigning a css class like

单选按钮列表而不是单选按钮创建唯一的 id 标签 name_0、name_1 等。 测试哪个被选中的简单方法是分配一个 css 类，如

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

回答by Vin05

Try this:

尝试这个：

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

回答by Shah Bdr

Try the below code:

试试下面的代码：

<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>

回答by digiguru

following is the code we eventually created. A breif explanation first. We used a "q_" for the div name wrapped around the radio button question list. Then we had "s_" for any sections. The following code loops through the questions to find the checked value, and then performs a slide action on the relevant section.

以下是我们最终创建的代码。先简单解释一下。我们使用“q_”作为环绕单选按钮问题列表的 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> 

The following allows us to make the question mandatory...

以下允许我们将问题设为强制性...

<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> 

Here's an example of the actual show / hide layer

这是实际显示/隐藏层的示例

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

回答by Felipe Fujiy Pessoto

I found a simple solution, try this:

我找到了一个简单的解决方案，试试这个：

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

回答by RWL01

I voted for Vinh's answer to get the value.

我投票支持 Vinh 的答案以获得价值。

If you need to find the corresponding label, you can use this code:

如果需要找到对应的标签，可以使用这个代码：

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

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