Lendo o valor seleccionado de entre asp: RadioButtonList usando jQuery

Question

Eu tenho código semelhante ao seguinte ...

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

Eu quero capturar um evento quando os blBuffetMealFacilities Lista de rádio: chk muda lado do cliente e executar um slide para baixo função no div HasBuffet do jQuery. Qual é a melhor maneira de criar este, tendo em mente há várias seções semelhantes na página, onde eu quero perguntas para ser revelado dependendo de sim nenhuma resposta em uma lista de rádio.

Answer 1

este:

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

você irá obter o índice do botão de rádio que foi clicado (eu acho, não testado) (note que você teve de quebrar a RBL em #rblDiv

Você poderia, então, usar isso para mostrar a div correspondente assim:

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

É isso que você queria dizer?

Edit: Outra abordagem seria dar a RBL um nome de classe, em seguida, ir:

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

Answer 2

A maneira mais simples para recuperar valor marcado de RadioButtonList1 é:

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

Editar por Tim:

onde RadioButtonList1 deve ser o ClientID do RadioButtonList

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

Answer 3

Isso funcionou para mim ...

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

O manipulador:

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

A parte importante: $ ( "input [name = '<% = Intent.UniqueID%>']: Rádio: checked"). Val ();

Answer 4

Segundo a mim que vai estar funcionando bem ...

Apenas tente com este

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

---

O valor RadioButtonList para ser armazenado em GetValue (Variable).

Answer 5

A Radio Button lista em vez de um botão de rádio cria única id tags NAME_0, nome_1 etc. Uma maneira fácil de teste que é selecionado é através da atribuição de uma classe css como

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

Answer 6

Tente isto:

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

Answer 7

Segue-se o código que acabou de criar. Uma explicação breif primeiro. Nós usamos um "q_" para o nome div envolvida em torno da lista de perguntas botão de rádio. Então nós tivemos "s_" para todas as seções. Os seguintes laços Código mediante a perguntas para encontrar o valor verificado, e, em seguida, executa uma ação de slides na respectiva secção.

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> 

A seguir nos permite fazer a pergunta obrigatória ...

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

Aqui está um exemplo do actual Show / Hide camada

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

Answer 8

Tente o código abaixo:

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

Answer 9

solução Andrew Bullock funciona muito bem, eu só queria mostrar o meu e adicionar um aviso.

// Funciona muito bem

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

// Aviso -. Funciona no Firefox, mas não IE8 .. utilizados isso por algum tempo antes de uma percebendo que não funcionava no IE8 ... usado para tudo funcionando em todos os navegadores com jQuery quando se trabalha em um

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

Answer 10

Eu votei para a resposta de Vinh para obter o valor.

Se você precisa encontrar a etiqueta correspondente, você pode usar este código:

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

Answer 11

Para o meu cenário, meu JS estava em um arquivo separado, portanto, usando uma saída de resposta ClientID não era propício. Surpreendentemente, a solução era tão simples como a adição de um CssClass para o RadioButtonList, que eu descobri em DevCurry

Só no caso que desaparece solução, adicionar uma classe à sua lista de botão de rádio

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

Como O artigo aponta, quando a lista de botão de rádio é processado, a classe "tbl" é anexado à mesa circundante

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

Agora, por causa da classe CSS que foi anexado, você pode apenas referir-se a entrada: itens de rádio dentro de sua mesa, com base no seletor de classe css

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

Mais uma vez, isso evita usando o "ClientID" mencionado acima que eu achei confuso para o meu cenário. Espero que isso ajude!

Answer 12

Por que tão complexa?

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

vai funcionar muito bem!

Answer 13

Eu encontrei uma solução simples, tente o seguinte:

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