Lettura del valore selezionato da asp: RadioButtonList usando jQuery

Question

Ho un codice simile al seguente ...

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

Voglio catturare un evento quando l'elenco radio blBuffetMealFacilities: chk cambia lato client ed esegue una funzione di scorrimento verso il basso sul div HasBuffet di jQuery. Qual è il modo migliore per creare questo, tenendo presente che ci sono diverse sezioni simili nella pagina, in cui desidero che le domande vengano rivelate a seconda di una risposta sì no in un elenco radio.

Answer 1

questo:

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

ti porterà all'indice del pulsante di opzione su cui è stato fatto clic (penso, non testato) (nota che hai dovuto avvolgere il tuo RBL in #rblDiv

puoi quindi usarlo per visualizzare il div corrispondente in questo modo:

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

È quello che intendevi?

Modifica: un altro approccio sarebbe quello di dare alla rbl un nome di classe, quindi andare:

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

Answer 2

Il modo semplice per recuperare il valore verificato di RadioButtonList1 è:

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

Modifica di Tim:

dove RadioButtonList1 deve essere l'ID client di RadioButtonList

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

Answer 3

Questo ha funzionato per 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>

Il gestore:

$(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: $ (quot; ingresso [name = 'lt;% = Intent.UniqueID% gt & &;'] &: Radio: & Controllato quot;). Val ();

Answer 4

Secondo me funzionerà bene ...

Prova con questo

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

---

  

Il valore di Radiobuttonlist da archiviare su GetValue (variabile).

Answer 5

Un elenco di pulsanti di opzione anziché un pulsante di opzione crea tag ID univoci nome_0, nome_1 ecc. Un modo semplice per verificare quale è selezionato è assegnando una classe CSS come

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

Answer 6

Prova questo:

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

Answer 7

seguente è il codice che alla fine abbiamo creato. Una spiegazione breif prima. Abbiamo usato un & Quot; q _ & Quot; per il nome div racchiuso nell'elenco delle domande dei pulsanti di opzione. Quindi abbiamo avuto & Quot; s _ & Quot; per qualsiasi sezione. Il seguente codice scorre ciclicamente le domande per trovare il valore selezionato, quindi esegue un'azione della diapositiva nella sezione pertinente.

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> 

Quanto segue ci consente di rendere obbligatoria la domanda ...

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

Ecco un esempio dell'attuale livello mostra / nascondi

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

Answer 8

Prova il codice seguente:

<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 soluzione Andrew Bullock funziona perfettamente, volevo solo mostrarti la mia e aggiungere un avviso.

// Funziona alla grande

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

// Avvertenza: funziona con Firefox ma non con IE8 .. usato questo per qualche tempo prima di notare che non funzionava in IE8 ... usato per tutto ciò che funziona in tutti i browser con jQuery quando si lavora in uno.

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

Answer 10

Ho votato per la risposta di Vinh per ottenere il valore.

Se devi trovare l'etichetta corrispondente, puoi usare questo codice:

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

Answer 11

Per il mio scenario, il mio JS era in un file separato, quindi l'utilizzo di un output di risposta ClientID non era favorevole. Sorprendentemente, la soluzione era semplice come aggiungere una CssClass a RadioButtonList, che ho scoperto su DevCurry

Nel caso in cui la soluzione scompaia, aggiungi una classe all'elenco dei pulsanti di opzione

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

Come sottolinea l'articolo, quando viene visualizzato l'elenco dei pulsanti di opzione, la classe " tbl " viene aggiunto al tavolo circostante

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

Ora a causa della classe CSS che è stata aggiunta, puoi semplicemente fare riferimento all'input: elementi radio nella tua tabella, in base al selettore di classe css

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

Ancora una volta, questo evita di usare " ClientID " di cui sopra che ho trovato disordinato per il mio scenario. Spero che questo aiuti!

Answer 12

Perché è così complesso?

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

Funzionerà perfettamente!

Answer 13

Ho trovato una soluzione semplice, prova questo:

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