使用jQuery从asp:RadioButtonList读取所选值

时间:2008-11-21 09:56:13

标签: jquery asp.net event-handling radio-button

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

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

13 个答案:

答案 0 :(得分:80)

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

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

蒂姆编辑:

其中RadioButtonList1必须是RadioButtonList的ClientID

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

答案 1 :(得分:29)

这样:

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

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

然后你可以使用它来显示相应的div:

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

这是你的意思吗?

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

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

答案 2 :(得分:11)

这对我有用......

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

重要的部分: 的 $( “输入[名称= '&LT;%= Intent.UniqueID%GT;']:电台:检查”)VAL();

答案 3 :(得分:5)

根据我的意见,它会正常工作......

试试这个

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

  

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

答案 4 :(得分:4)

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

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

答案 5 :(得分:3)

试试这个:

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

答案 6 :(得分:1)

以下是我们最终创建的代码。先解释一下。我们在单选按钮问题列表中使用了“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>

答案 7 :(得分:1)

请尝试以下代码:

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

答案 8 :(得分:0)

我找到了一个简单的解决方案,试试这个:

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

答案 9 :(得分:0)

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

//效果很好

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

答案 10 :(得分:0)

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

如果您需要找到相应的标签,可以使用以下代码:

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

答案 11 :(得分:0)

对于我的场景,我的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”,我发现我的场景很乱。希望这有帮助!

答案 12 :(得分:0)

为什么这么复杂?

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

工作得很好!