web-dev-qa-db-fra.com

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

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 division 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'un oui ou d'une non dans une liste de radio.

jqueryasp.netevent-handlingradio-button
39
digiguru

ce:

$('#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?

Edit: Une autre approche serait de donner à la red un nom de classe, puis aller:

$('.rblClass').val();
29
Andrew Bullock

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

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

Edité par Tim: 

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

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

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 [nom = '<% = Intent.UniqueID%>']: radio: cochée"). Val ();

11
user981090

Selon moi, ça va bien marcher ... 

Juste essayer avec ça

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

La valeur Radiobuttonlist à stocker sur GetValue (Variable). 

5
azarudeen

Une liste de boutons radio au lieu d'un bouton radio crée des balises id uniques nom_0, nom_1, etc. Un moyen simple de tester ce qui est sélectionné consiste à affecter une classe css telle que

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

Essaye ça:

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

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>
1
Shah Bdr

voici le code que nous avons finalement créé. Une explication brève en premier. Nous avons utilisé un "q_" 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>
1
digiguru

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

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

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

// Warning - fonctionne dans firefox mais pas dans IE8 .. l'a utilisé pendant un certain temps avant de s'apercevoir que cela ne fonctionnait pas dans IE8 ... utilisé pour que tout fonctionne dans tous les navigateurs avec jQuery.

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

Pour mon scénario, mon JS se trouvait dans un fichier séparé, l’utilisation d’une sortie de réponse ClientID n’était donc 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 à votre liste de 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ée au tableau environnant.

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

Maintenant, à cause de la classe CSS qui a été ajoutée, vous pouvez simplement vous référer aux éléments input: radio de votre table, 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 "ClientID" mentionné ci-dessus, que j’ai trouvé désordonné pour mon scénario. J'espère que cela t'aides!

0
ewitkows

Pourquoi si complexe?

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

Travaillera très bien!

0
Predders