Lecture de la valeur sélectionnée depuis asp: RadioButtonList à l'aide de jQuery

Question

J'ai un code similaire à celui-ci ...

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

Je souhaite capturer un événement lorsque la liste de radios blBuffetMealFacilities: chk change de côté client et exécute une fonction de glissement vers le bas sur la div HasBuffet de jQuery. Quelle est la meilleure façon de créer cela, en gardant à l'esprit qu'il y a plusieurs sections similaires sur la page, dans lesquelles je souhaite que les questions soient révélées en fonction d'une réponse affirmative non dans une liste de radios.

Answer 1

ceci:

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

vous obtiendrez l'index du bouton radio sur lequel vous avez cliqué (je pense, non testé) (notez que vous avez dû envelopper votre RBL dans #rblDiv

vous pouvez ensuite l'utiliser pour afficher le div correspondant comme ceci:

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

Est-ce ce que vous vouliez dire?

Modifier: une autre approche consisterait à attribuer un nom de classe à la règle, puis à l’aide:

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

Answer 2

Le moyen simple de récupérer la valeur vérifiée de RadioButtonList1 est:

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

Modifier par Tim:

où RadioButtonList1 doit être l'ID client de RadioButtonList

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

Answer 3

Cela a fonctionné pour moi ...

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

Le gestionnaire:

$(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 partie importante: $ (" input [name = '<% = Intent.ID uniqueID% >']: radio: cochée "). val ();

Answer 4

Selon moi, ça va bien marcher ...

Essayez simplement avec ceci

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

  

La valeur Radiobuttonlist à stocker sur GetValue (variable).

Answer 5

Une liste de boutons radio au lieu d'un bouton radio crée des balises id uniques name_0, name_1, etc. Un moyen simple de tester le fichier sélectionné consiste à affecter une classe CSS comme

.

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

Answer 6

Essayez ceci:

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

Answer 7

suit est le code que nous avons finalement créé. Une explication brève en premier. Nous avons utilisé un & Quot; q _ & Quot; pour le nom de la division entourant la liste de questions du bouton radio. Ensuite, nous avons eu & "; S _ &"; pour toutes les sections. Le code suivant parcourt les questions pour trouver la valeur vérifiée, puis effectue une action de diapositive sur la section appropriée.

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> 

Ce qui suit nous permet de rendre la question obligatoire ...

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

Voici un exemple de la couche d'affichage / masquage réelle

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

Answer 8

Essayez le code ci-dessous:

<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 solution Andrew Bullock fonctionne très bien, je voulais juste vous montrer le mien et ajouter un avertissement.

// fonctionne très bien

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

// Avertissement - fonctionne dans Firefox mais pas dans IE8 .. utilisé pendant un certain temps avant de constater que cela ne fonctionnait pas dans IE8 ... utilisé pour que tout fonctionne dans tous les navigateurs avec jQuery lorsque vous travaillez dans un.

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

Answer 10

J'ai voté pour la réponse de Vinh afin d'obtenir la valeur.

Si vous avez besoin de trouver l'étiquette correspondante, vous pouvez utiliser ce code:

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

Answer 11

Pour mon scénario, mon JS se trouvait dans un fichier séparé. Par conséquent, l'utilisation d'une sortie de réponse ClientID n'était pas propice. Étonnamment, la solution était aussi simple que d’ajouter un CssClass à RadioButtonList, que j’ai découvert sur DevCurry

Si la solution disparaît, ajoutez une classe à la liste des boutons radio

.

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

Comme le souligne l'article, lorsque la liste des boutons radio est rendue, la classe " tbl " est ajouté à la table environnante

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

Maintenant, à cause de la classe CSS ajoutée, vous pouvez simplement vous référer aux éléments input: radio de votre tableau, en fonction du sélecteur de classe css

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

Encore une fois, cela évite d'utiliser le " ID client & "; mentionné ci-dessus que j'ai trouvé en désordre pour mon scénario. J'espère que cela aide!

Answer 12

Pourquoi si complexe?

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

Cela fonctionnera-t-il parfaitement!

Answer 13

J'ai trouvé une solution simple, essayez ceci:

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