Frage Lesen des ausgewählten Werts aus asp: RadioButtonList mit jQuery


Ich habe Code ähnlich dem folgenden ...

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

Ich möchte ein Ereignis erfassen, wenn die Radioliste blBuffetMealFacilities: chk Änderungen Client-Seite und führen von jQuery eine Dia-Down-Funktion auf dem HasBuffet div. Was ist der beste Weg, dies zu schaffen, wenn man bedenkt, gibt es mehr ähnlichen Abschnitte auf der Seite, wo ich Fragen möge in einer Radioliste in Abhängigkeit von einer ja keine Antwort offenbart werden.


38
2017-11-21 09:56


Ursprung


Antworten:


Dies:

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

Sie erhalten den Index des Optionsfelds, auf das geklickt wurde (ich denke, ungetestet) (Beachten Sie, dass Sie Ihre RBL in #rblDiv verpacken mussten)

Sie könnten dann das verwenden, um das entsprechende div wie folgt anzuzeigen:

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

Ist es das, was du meintest?

Edit: Ein anderer Ansatz wäre, dem Rbl einen Klassennamen zu geben.

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

28
2017-11-21 10:07



Die einfache Möglichkeit, den überprüften Wert von RadioButtonList1 abzurufen, ist:

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

Bearbeiten von Tim:

woher RadioButtonList1 muss die ClientID der RadioButtonList sein

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

74
2018-05-21 03:59



Das hat für mich funktioniert ...

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

Der Handler:

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

Der wichtige Teil: $ ("input [name = '<% = Intent.UniqueID%>']: radio: aktiviert"). val ();


11
2017-10-05 19:58



Eine Radioknopf-Liste anstelle einer Radio-Schaltfläche erzeugt eindeutige ID-Tags name_0, name_1 usw. Eine einfache Möglichkeit zu testen, welche ausgewählt wird, ist die Zuweisung einer CSS-Klasse wie

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

4
2018-06-10 07:23



Laut mir wird es gut funktionieren ...

Versuchen Sie es einfach

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

Der RadioButtonlist-Wert, der in GetValue (Variable) gespeichert werden soll.


4
2018-05-03 06:42



Versuche dies:

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

2
2017-10-02 13:04



Das Folgende ist der Code, den wir schließlich erstellt haben. Eine kurze Erklärung zuerst. Wir haben ein "q_" für den div-Namen verwendet, der um die Fragenliste der Optionsschaltfläche gewickelt wurde. Dann hatten wir "s_" für alle Abschnitte. Der folgende Code durchläuft die Fragen, um den überprüften Wert zu finden, und führt anschließend eine Folie für den relevanten Abschnitt aus.

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> 

Folgendes erlaubt uns, die Frage verbindlich zu machen ...

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

Hier ist ein Beispiel für die tatsächliche Ebene zum Anzeigen / Ausblenden

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

1
2018-04-02 08:22



Probieren Sie den folgenden Code aus:

<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
2017-07-03 17:13



Warum so komplex?

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

Wird gut funktionieren!


1
2018-01-27 12:35



Andrew Bullock Lösung funktioniert gut, ich wollte Ihnen nur meine zeigen und eine Warnung hinzufügen.

//Funktioniert super

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

// Warnung - Arbeiten in Firefox aber nicht IE8 .. dies vor ... verwendet arbeitet in allen Browsern mit jQuery, um alles einer zu bemerken, dass es nicht funktioniert in IE8 seit einiger Zeit verwendet, wenn in einem Arbeits.

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

0
2017-09-17 10:14



Ich habe für Vinhs Antwort gestimmt, um den Wert zu erhalten.

Wenn Sie das entsprechende Etikett finden müssen, können Sie diesen Code verwenden:

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


0
2017-07-15 14:44