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

Posted 2023-03-05

【中文标题】使用 jQuery 从 asp:RadioButtonList 读取选定的值

【英文标题】：Reading the selected value from asp:RadioButtonList using jQuery

【发布时间】：2010-09-23 10:12:23

【问题描述】：

我有类似下面的代码...

<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 上执行向下滑动功能时捕获一个事件。创建这个的最佳方法是什么，请记住页面上有几个类似的部分，我希望根据广播列表中的“是”或“否”答案来揭示问题。

【问题讨论】：

关于可用性：也许你应该考虑一下列表项文本。例如，有 40 个地方的地方可能会选择“最多 30 个”，因为最多不能提供 50 个，但您列表中的值表明 upto50 是正确的选择....

【参考方案1】：

获取 RadioButtonList1 的选中值的简单方法是：

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

蒂姆编辑：

其中RadioButtonList1 必须是 RadioButtonList 的 ClientID

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

【讨论】：

我试过但没用，但我以另一种方式使用相同的搜索条件，它可以工作：alert($('#').find('input:checked ').val());

是的，我们必须先获取 ClientID。而 jQuery 风格是： var clientId = ''; $('#'+clientId+' input:checked').val()

【参考方案2】：

这个：

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

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

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

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

这是你的意思吗？

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

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

【讨论】：

干得好 - 我将如何获得选定的值而不是输入的索引？

由于 WebForms 构建控件的愚蠢方式，我使用 jQuery 将类分配给输入/复选框，然后使用 $('.classname').val() 获取当前选择的值.

您可以随时将clientidmode更改为静态，然后您的id保持不变

【参考方案3】：

这对我有用...

<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='']:radio:checked").val();

【参考方案4】：

根据我的说法，它会工作得很好......

试试这个

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

---

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

【参考方案5】：

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

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

【参考方案6】：

试试这个：

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

【参考方案7】：

以下是我们最终创建的代码。先简单解释一下。我们使用“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> 

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

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

【参考方案8】：

试试下面的代码：

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

【讨论】：

这只有在你使用 jQuery UI 时才可用....jqueryui.com/demos/button/#radio

【参考方案9】：

为什么这么复杂？

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

会正常工作的！

【参考方案10】：

Andrew Bullock 解决方案效果很好，我只是想向您展示我的解决方案并添加警告。

//效果很好

$('#<%= 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
);

【参考方案11】：

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

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

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

【参考方案12】：

对于我的场景，我的 JS 位于一个单独的文件中，因此使用 ClientID 响应输出不利于。令人惊讶的是，解决方案就像在 RadioButtonList 中添加一个 CssClass 一样简单，我在 DevCurry 上发现了这一点

如果该解决方案消失，请在您的单选按钮列表中添加一个类

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

正如文章所指出的，当单选按钮列表被渲染时，类“tbl”被附加到周围的表格中

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

现在由于附加了 CSS 类，您可以根据 css 类选择器仅引用表格中的 input:radio 项目

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

再次，这避免了使用上面提到的“ClientID”，我发现我的场景很混乱。希望这会有所帮助！

【参考方案13】：

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

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

【讨论】：

这是一个糟糕的主意，通过客户端 ID 寻址 rbl。您无法控制 id。如果将来您将 rbl 嵌套在面板中会怎样？你的 id 会不一样，你的 js 会坏掉。失败。

可以生成JS：