Leer el valor seleccionado de asp:RadioButtonList usando jQuery

Question

Tengo un código similar al siguiente...

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

Quiero capturar un evento cuando la lista de radio blBuffetMealFacilities:chk cambios del lado del cliente y realizar un deslizamiento hacia abajo de la función de la HasBuffet div de jQuery.¿Cuál es la mejor forma de crear este, teniendo en cuenta que hay varias secciones similares en la página, donde quiero preguntas para ser revelado dependiendo de sí no respuesta en una lista de botones de radio.

Answer 1

esto:

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

le dará el índice del botón de radio en el que se hizo clic (creo que no se ha probado) (tenga en cuenta que ha tenido que ajustar su RBL en #rblDiv

puede usar eso para mostrar el div correspondiente de esta manera:

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

¿Es eso lo que querías decir?

Editar: Otro enfoque sería darle a la rbl un nombre de clase, luego ir:

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

Answer 2

La forma simple de recuperar el valor verificado de RadioButtonList1 es:

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

Editar por Tim:

donde RadioButtonList1 debe ser el ClientID de RadioButtonList

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

Answer 3

Esto funcionó para mí ...

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

El controlador:

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

La parte importante: $ (" input [name = '<% = Intent.UniqueID% >']: radio: check "). val ();

Answer 4

Según yo, funcionará bien ...

Solo intenta con esto

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

---

  

El valor de Radiobuttonlist que se almacenará en GetValue (Variable).

Answer 5

Una lista de botones de radio en lugar de un botón de radio crea etiquetas de identificación únicas name_0, name_1, etc. Una manera fácil de probar cuál se selecciona es asignando una clase css como

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

Answer 6

Prueba esto:

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

Answer 7

siguiente es el código que finalmente creamos. Una breve explicación primero. Utilizamos un & Quot; q _ & Quot; para el nombre div envuelto alrededor de la lista de preguntas del botón de radio. Luego tuvimos & Quot; s _ & Quot; para cualquier sección El siguiente código recorre las preguntas para encontrar el valor marcado y luego realiza una acción de deslizamiento en la sección correspondiente.

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> 

Lo siguiente nos permite hacer que la pregunta sea obligatoria ...

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

Aquí hay un ejemplo de la capa real de mostrar / ocultar

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

Answer 8

Pruebe el siguiente código:

<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

La solución de Andrew Bullock funciona bien, solo quería mostrarte la mía y agregar una advertencia.

// Funciona muy bien

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

// Advertencia: funciona en Firefox pero no en IE8 ... usó esto durante algún tiempo antes de notar que no funcionaba en IE8 ... solía funcionar en todos los navegadores con jQuery cuando trabajaba en uno.

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

Answer 10

Voté por la respuesta de Vinh para obtener el valor.

Si necesita encontrar la etiqueta correspondiente, puede usar este código:

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

Answer 11

Para mi escenario, mi JS fue en un archivo separado, por lo que el uso de un ClientID respuesta de salida no era favorable.Sorprendentemente, la solución fue tan simple como agregar un CssClass a la RadioButtonList, que he encontrado en DevCurry

Sólo en caso de que la solución desaparece, agregar una clase a tu lista de botones de radio

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

Como el artículo señala, cuando el botón de radio de la lista se representa, la clase "tbl" se anexa a los alrededores de la tabla

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

Ahora, porque de la clase CSS que se ha anexado, usted sólo puede hacer referencia a la entrada:la radio de los elementos dentro de la tabla, en función de la css selector de clase

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

De nuevo, esto evita el uso de la "ClientID" que mencionamos anteriormente, que he encontrado desordenado para mi escenario.Espero que esto ayude!

Answer 12

¿Por qué tan complejo?

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

¡Funcionará bien!

Answer 13

Encontré una solución simple, prueba esto:

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