Das Lesen der ausgewählte Wert von asp: Radiobuttonlist mit jQuery

Question

Ich habe Code ähnlich den 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 Client-Seite ändert und eine Dia-Down-Funktion auf dem HasBuffet div von jQuery ausführen. Was ist der beste Weg, dies zu schaffen, da eingedenk mehrere ähnlichen Abschnitte auf der Seite sind, wo ich Fragen möge in Abhängigkeit von einer in einer Radioliste ja keine Antwort offenbart werden.

Answer 1

folgt aus:

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

werden Sie den Index der Radio-Button erhalten, die angeklickt wurde (ich glaube, ungetestet) (Hinweis: Sie habe Ihre RBL in #rblDiv wickeln

Sie können dann verwenden, um die entsprechende div wie folgt angezeigt werden:

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

Ist das, was Sie gemeint?

Edit: Ein anderer Ansatz wäre die rbl einen Klassennamen zu geben, dann gehen Sie:

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

Answer 2

Die einfache Art und Weise geprüft Wert von RadioButtonList1 abzurufen ist:

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

Bearbeiten von Tim:

wo RadioButtonList1 muss die ClientID des Radiobuttonlist sein

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

Answer 3

Das funktioniert für mich ...

<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: checked") val ();

.

Answer 4

ich nach, es wird funktionieren gut ...

Nur mit diesem versuchen

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

---

  

Der Wert Radiobuttonlist wird auf GetValue gespeichert (Variable).

Answer 5

Ein Radiobutton-Liste anstelle eines Radiobutton schafft einzigartige ID-Tags NAME_0, name_1 usw. Eine einfache Möglichkeit zu testen, welche durch die Zuweisung einer CSS-Klasse ausgewählt wird, wie

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

Answer 6

Versuchen Sie folgendes:

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

Answer 7

Folgende ist der Code, den wir schließlich erstellt. Eine breif Erklärung zuerst. Wir haben eine „Q_“ für den div Namen rund um den Radio-Button Fragenliste gewickelt. Dann hatten wir „s_“ für alle Abschnitte. Die folgende Code-Schleifen durch die Fragen, die geprüften Wert zu finden, und führt dann eine Folie Aktion auf der entsprechenden Seite.

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> 

Im Folgenden können wir die Frage obligatorisch 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 der tatsächlichen Ein- / Ausblenden Schicht

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

Answer 8

Versuchen Sie, den folgenden Code:

<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

Andrew Bullock Lösung funktioniert gut, ich wollte nur du mir zeigen, und eine Warnung hinzuzufügen.

// Funktioniert prima

$('#<%= 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 einem seit einiger Zeit bemerken verwendet, dass es Arbeit in IE8 den Ball hielt ... verwendet, um alles in allen Browsern mit jQuery arbeiten, wenn in einem Arbeits

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

Answer 10

ich für Vinh Antwort gestimmt, den Wert zu erhalten.

Wenn Sie das entsprechende Label finden, dann können Sie diesen Code verwenden:

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

Answer 11

Für mein Szenario war, meine JS in einer separaten Datei, so dass eine ClientID Antwortausgabe unter Verwendung war nicht förderlich. Überraschenderweise war die Lösung so einfach wie ein CssClass zum Hinzufügen von Radiobuttonlist, die ich auf DevCurry

Just Incase diese Lösung verschwindet, fügen Sie eine Klasse zu Ihrem Optionsfeld Liste

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

Wie der Artikel weist darauf hin, wenn das Optionsfeld Liste wiedergegeben wird, die Klasse „TBL“ an die umgebenden Tabelle angehängt

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

Nun, da die CSS-Klasse, die angehängt wurde, können Sie nur zur Eingabe beziehen: Radio Artikel innerhalb Ihrer Tabelle, basierend auf dem CSS-Klasse-Selektor

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

Auch dies vermeidet die „ClientID“ erwähnt mit, über den ich für mein Szenario chaotisch gefunden. Hoffe, das hilft!

Answer 12

Warum so kompliziert?

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

wird gut funktionieren!

Answer 13

ich eine einfache Lösung gefunden, versuchen Sie dies:

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