webentwicklung-frage-antwort-db.com.de

Lesen des ausgewählten Wertes 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 die Client-Seite wechselt und eine Slide-Down-Funktion für das HasBuffet-Div von jQuery ausführt. Was ist der beste Weg, um dies zu schaffen, wenn man bedenkt, dass es mehrere ähnliche Abschnitte auf der Seite gibt, in denen ich Fragen offenlegen möchte, die von einer Ja-Nein-Antwort in einer Radioliste abhängig sind.

39
digiguru

diese:

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

sie erhalten den Index des angeklickten Optionsfelds (ich denke, nicht getestet) (beachten Sie, dass Sie Ihre RBL in #rblDiv einpacken mussten

sie könnten dann das entsprechende div so anzeigen:

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

Ist es das, was du meintest?

Edit: Ein anderer Ansatz wäre, der Rbl einen Klassennamen zu geben und dann zu gehen:

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

Der einfachste Weg, einen geprüften Wert von RadioButtonList1 abzurufen, ist:

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

Edit by Tim: 

dabei muss RadioButtonList1 die ClientID der RadioButtonList sein 

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

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

11
user981090

Meiner Meinung nach wird es gut funktionieren ... 

Versuchen Sie es einfach damit

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

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

5
azarudeen

Eine Optionsfeld-Liste anstelle eines Optionsfelds erstellt eindeutige ID-Tags name_0, name_1 usw. Eine einfach zu testende Methode ist die Zuweisung einer CSS-Klasse

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

Versuche dies:

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

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

folgendes ist der Code, den wir schließlich erstellt haben. Zuerst eine kurze Erklärung. Wir haben ein "q_" für den Div-Namen verwendet, der um die Optionsliste der Optionsfelder gewickelt ist. Dann hatten wir "s_" für irgendwelche Abschnitte. Der folgende Code durchläuft die Fragen, um den geprüften Wert zu finden, und führt dann eine Folienaktion 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> 

Im Folgenden können wir die Frage verbindlich 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 Show/Hide-Ebene

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

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

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

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

0
RWL01

Ich habe eine einfache Lösung gefunden, probiere es aus:

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

Die Lösung von Andrew Bullock funktioniert einwandfrei. 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 - funktioniert in Firefox, aber nicht in IE8 .. hat dies einige Zeit verwendet, bevor festgestellt wurde, dass es nicht in IE8 funktioniert ... alle Funktionen, die in allen Browsern mit jQuery funktionieren, wenn in einem Browser gearbeitet wird.

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

In meinem Szenario befand sich mein JS in einer separaten Datei, sodass die Verwendung einer ClientID-Antwortausgabe nicht förderlich war. Überraschenderweise war die Lösung so einfach wie das Hinzufügen einer CssClass zur RadioButtonList, die ich auf DevCurry gefunden habe.

Wenn diese Lösung nicht mehr angezeigt wird, fügen Sie der Liste mit den Optionsfeldern eine Klasse hinzu

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

Wie der Artikel darauf hinweist, wird beim Rendern der Optionsfeldliste die Klasse "tbl" an die umgebende Tabelle angehängt

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

Aufgrund der angefügten CSS-Klasse können Sie jetzt einfach auf Eingabe: Radioelemente in Ihrer Tabelle verweisen, die auf dem Klassenauswahlselektor css basieren

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

Dies vermeidet wiederum die Verwendung der oben erwähnten "ClientID", die ich für mein Szenario unordentlich fand. Hoffe das hilft!

0
ewitkows

Warum so komplex?

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

Funktioniert gut!

0
Predders