jQuery ruft den Wert des ausgewählten Optionsfelds ab

557

Die Problemstellung ist einfach. Ich muss sehen, ob der Benutzer ein Optionsfeld aus einer Optionsgruppe ausgewählt hat. Jedes Optionsfeld in der Gruppe hat dieselbe ID.

Das Problem ist, dass ich keine Kontrolle darüber habe, wie das Formular generiert wird. Hier ist der Beispielcode, wie ein Optionsfeld-Steuercode aussieht:

<input type="radio" name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >

Zusätzlich dazu , wenn ein Optionsfeld ausgewählt ist es keine „geprüft“ Attribut an die Steuerung nur Text fügt geprüft (ich denke , gerade die Eigenschaft , ohne einen Wert geprüft) . Im Folgenden sehen Sie, wie eine ausgewählte Funksteuerung aussieht

<input type="radio" checked name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >

Kann mir jemand mit jQuery-Code helfen, der mir helfen kann, den Wert des aktivierten Optionsfelds zu ermitteln?

user1114212
quelle
71
Sie haben mehrere Elemente mit derselben ID? Das ist furchtbar.
Matt Ball
Wie funktioniert das mit allen, die dieselbe ID haben? Bei der Auswertung nach ID stoppt die Auswertung nicht beim ersten übereinstimmenden Element? Was ist der Zweck hier sind sie dynamische Elemente zu unterschiedlichen Zeiten gezeigt?
Mark Carpenter Jr
1
Zu Ihrer Information: Der @ Html.RadioButtonFor-Helfer von ASP.NET MVC generiert alle Optionsfelder mit derselben ID. Hoppla.
Triynko

Antworten:

1119

Benutz einfach.

$('input[name="name_of_your_radiobutton"]:checked').val();

So einfach ist das.

Parveen Verma
quelle
25
Vergessen Sie nicht die Anführungszeichen: $ ("input [name = '" + fieldName + "']: checked"). Val ();
Atara
4
@ Guraprasad Rao: Es ist der richtige Code - die Anführungszeichen werden in diesem Fall nicht benötigt. Probieren Sie es aus und sehen Sie.
Stefan
2
Warum gibt dies "on" zurück und nicht den Wert, den ich im HTML angegeben habe? EDIT: Weil ich keine Anführungszeichen um meine Werte hatte.
Vincent
3
$ ('input [name = "name_of_your_radiobutton"]: checked'). val ();
Sameera Prasad Jayasinghe
1
Beachten Sie, dass wenn keine Schaltfläche ausgewählt ist, diese nur zurückgegeben wird. Dies nullist logisch, kann Sie jedoch manchmal verwirren, wenn Sie es gewohnt sind, ""den Standardwert über den .val()Anruf anzuzeigen.
xji
313

Erstens können Sie nicht mehrere Elemente mit derselben ID haben. Ich weiß, dass Sie gesagt haben, Sie können nicht steuern, wie das Formular erstellt wird, aber ... versuchen Sie irgendwie, alle IDs aus den Radios zu entfernen oder sie eindeutig zu machen.

Um den Wert des ausgewählten Optionsfelds abzurufen, wählen Sie ihn mit dem :checkedFilter nach Namen aus .

var selectedVal = "";
var selected = $("input[type='radio'][name='s_2_1_6_0']:checked");
if (selected.length > 0) {
    selectedVal = selected.val();
}

BEARBEITEN

Sie haben also keine Kontrolle über die Namen. In diesem Fall würde ich sagen, setzen Sie diese Optionsfelder alle in ein div, das beispielsweise benannt ist, radioDivund ändern Sie dann Ihren Selektor leicht:

var selectedVal = "";
var selected = $("#radioDiv input[type='radio']:checked");
if (selected.length > 0) {
    selectedVal = selected.val();
}
Adam Rackis
quelle
75

Der einfachste Weg, um den Wert des ausgewählten Optionsfelds zu erhalten, ist folgender:

$("input[name='optradio']:checked").val();

Zwischen dem Selektor darf kein Leerzeichen verwendet werden.

Hardik
quelle
Dies ist die einfachste Option.
Andreszs
44
$("#radioID") // select the radio by its id
    .change(function(){ // bind a function to the change event
        if( $(this).is(":checked") ){ // check if the radio is checked
            var val = $(this).val(); // retrieve the value
        }
    });

Stellen Sie sicher, dass Sie dies in die DOM-Bereitschaftsfunktion ( $(function(){...});oder $(document).ready(function(){...});) einschließen .

Purag
quelle
Ich erhalte mit diesem Code immer einen leeren Wert. Ich denke, dies liegt an der Tatsache, dass ich keine Eigenschaft mit überprüftem Wert habe, sondern nur einen überprüften Text (ich bin nicht sicher, ob wir ihn als Eigenschaft betrachten können)
user1114212
Wählen Sie das Optionsfeld anhand seiner ID aus? Haben Sie radioIDdie ID geändert ?
Purag
37
  1. In Ihrem Code sucht jQuery nur nach der ersten Instanz einer Eingabe mit dem Namen q12_3, die in diesem Fall den Wert 1 hat. Sie möchten also eine Eingabe mit dem Namen q12_3 :checked.
$(function(){
    $("#submit").click(function() {     
        alert($("input[name=q12_3]:checked").val());
    });
});
  1. Beachten Sie, dass der obige Code nicht mit der Verwendung identisch ist .is(":checked"). Die is() Funktion von jQuery gibt einen Booleschen Wert (true oder false) und kein Element zurück.
Madhuka Dilhan
quelle
28
<input type="radio" class="radioBtnClass" name="numbers" value="1" />1<br/>
<input type="radio" class="radioBtnClass" name="numbers" value="2" />2<br/>
<input type="radio" class="radioBtnClass" name="numbers" value="3" />3<br/>

Dies gibt den aktivierten Optionsfeldwert zurück.

if($("input[type='radio'].radioBtnClass").is(':checked')) {
    var card_type = $("input[type='radio'].radioBtnClass:checked").val();
    alert(card_type);
}
Sumith Harshan
quelle
24
 $("input[name='gender']:checked").val()

für verschachtelte Attribute

$("input[name='lead[gender]']:checked").val()

Vergessen Sie nicht einzelne Klammern für den Namen


quelle
20

Holen Sie sich alle Radios:

var radios = $("input[type='radio']");

Filtern Sie, um die überprüfte zu erhalten

radios.filter(":checked");

ODER

Auf andere Weise können Sie den Wert des Optionsfelds ermitteln

var RadeoButtonStatusCheck = $('form input[type=radio]:checked').val();
Faisal
quelle
3
Ich benutze, $('[name=your_inputs_names]:checked').val()weil sie immer den gleichen eindeutigen Namen haben
vladkras
4
Gute Verwendung von.filter()
Mark Carpenter Jr
2
Das .filter(). Ich wünschte, diese Antwort könnte ganz oben stehen.
Yusril Maulidan Raji
16

Verwenden Sie RadioButtonName und die Formular-ID, die den RadioButton enthält, um den Wert des ausgewählten Optionsfelds abzurufen.

$('input[name=radioName]:checked', '#myForm').val()

ODER nur von

$('form input[type=radio]:checked').val();
Nadir
quelle
12

Überprüfen Sie das Beispiel, es funktioniert gut

<div class="dtl_radio">
  Metal purity : 
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="92" checked="">
    92 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="75">
    75 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="58.5">
    58.5 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="95">
    95 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="59">
    59 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="76">
    76 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="93">
    93 %
  </label>
   </div>

var check_value = $('.gold_color:checked').val();

Rajnesh Thakur
quelle
12

Im Folgenden finden Sie ein Arbeitsbeispiel mit einer Sammlung von Funkgruppen, die jeweils unterschiedlichen Abschnitten zugeordnet sind. Ihr Namensschema ist wichtig, aber im Idealfall sollten Sie trotzdem versuchen, ein konsistentes Namensschema für Eingaben zu verwenden (insbesondere, wenn sie sich in Abschnitten wie hier befinden).

$('#submit').click(function(){
  var section = $('input:radio[name="sec_num"]:checked').val();
  var question = $('input:radio[name="qst_num"]:checked').val();
  
  var selectedVal = checkVal(section, question);
  $('#show_val_div').text(selectedVal);
  $('#show_val_div').show();
});

function checkVal(section, question) {
  var value = $('input:radio[name="sec'+section+'_r'+question+'"]:checked').val() || "Selection Not Made";
  return value;
}
* { margin: 0; }
div { margin-bottom: 20px; padding: 10px; }
h5, label { display: inline-block; }
.small { font-size: 12px; }
.hide { display: none; }
#formDiv { padding: 10px; border: 1px solid black; }
.center { display:block; margin: 0 auto; text-align:center; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="center">
  <div>
    <h4>Section 1</h4>

    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec1_r1" value="(1:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r1" value="(1:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec1_r2" value="(1:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r2" value="(1:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec1_r3" value="(1:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r3" value="(1:3) NO"> NO</label>
  </div>

  <div>
    <h4>Section 2</h4>
    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec2_r1" value="(2:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r1" value="(2:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec2_r2" value="(2:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r2" value="(2:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec2_r3" value="(2:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r3" value="(2:3) NO"> NO</label>
  </div>

  <div>
    <h4>Section 3</h4>
    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec3_r1" value="(3:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r1" value="(3:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec3_r2" value="(3:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r2" value="(3:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec3_r3" value="(3:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r3" value="(3:3) NO"> NO</label>
  </div>
</div>


<div id="formDiv" class="center">
  <form target="#show_val_div" method="post">
    <p>Choose Section Number</p>
    <label class="small">
      <input type="radio" name="sec_num" value="1"> 1</label>
    <label class="small">
      <input type="radio" name="sec_num" value="2"> 2</label>
    <label class="small">
      <input type="radio" name="sec_num" value="3"> 3</label>
    <br/><br/>
    
    <p>Choose Question Number</p>
    <label class="small">
      <input type="radio" name="qst_num" value="1"> 1</label>
    <label class="small">
      <input type="radio" name="qst_num" value="2"> 2</label>
    <label class="small">
      <input type="radio" name="qst_num" value="3"> 3</label>
    <br/><br/>
    
    <input id="submit" type="submit" value="Show Value">
    
  </form>
  <br/>
  <p id="show_val_div"></p>
</div>
<br/><br/><br/>

MistyDawn
quelle
12

Verwenden Sie den folgenden Code

$('input[name=your_radio_button_name]:checked').val();

Bitte beachten Sie, dass das Wertattribut definiert werden sollte, damit Ihr Ergebnis "Männlich" oder "Weiblich" enthält.

<div id='div_container'>
<input type="radio" name="Gender" value="Male" /> Male <br />
<input type="radio" name="Gender" value="Female" /> Female
</div>
anand
quelle
7

Versuchen Sie dies anhand eines Beispiels

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1  /jquery.min.js"></script>
<form id="myForm">
<input type="radio" name="radio" value="first"/> 1 <br/>
<input type="radio" name="radio" value="second"/> 2 <br/>
</form>



<script>
$(document).ready(function () {
    $('#myForm').on('click', function () {
        var value = $("[name=radio]:checked").val();

        alert(value);
    })
});
</script>
saroj
quelle
7

Nur nach Namen

$(function () {
    $('input[name="EventType"]:radio').change(function () {
        alert($("input[name='EventType']:checked").val());
    });
});
Arun Prasad ES
quelle
6
if (!$("#InvCopyRadio").prop("checked") && $("#InvCopyRadio").prop("checked"))
    // do something
Tadej Magajna
quelle
1
Warum sollten Sie den String-Vergleich durchführen, undefinedwenn Sie sicher sind, dass der Wert sein muss checked? In jQuery ist dies nicht erforderlich.
Devin Burke
In der Frage sehe ich keine Informationen, die darauf hindeuten, dass ein Optionsfeld von Anfang an aktiviert wird. Ich meine, in den meisten Fällen ist das mit Optionsfeldern so. In dem Fall, in dem wir dies überprüfen müssten und keine ausgewählt wurden, würde attr ("geprüft") ein Nullobjekt zurückgeben.
Tadej Magajna
Richtig, aber ich wollte nur, dass die Rückgabe von null keinen Fehler verursacht, sodass der Vergleich mit nicht "undefined"erforderlich ist.
Devin Burke
5

Sie können den Wert des ausgewählten Optionsfelds anhand der ID in Javascript / jQuery abrufen.

$("#InvCopyRadio:checked").val();

Ich hoffe das wird helfen.

vishpatel73
quelle
sehr effizient !!
MHJ
4

Der beste Weg, um dieses einfache Thema zu erklären, besteht darin, ein einfaches Beispiel und einen Referenzlink anzugeben: -

Im folgenden Beispiel haben wir zwei Optionsfelder. Wenn der Benutzer ein Optionsfeld auswählt, wird der ausgewählte Optionsfeldwert in einem Warnfeld angezeigt.

Html:

<form id="Demo">
<input type="radio" name="Gender" value="Male" /> Male <br />
<input type="radio" name="Gender" value="Female" /> Female<br />
<input type="radio" name="Gender" value="others" /> others <br />
</form>

jquery: -

 $(document).ready(function(){
        $('#Demo input').on('change', function() {
            alert($('input[name="Gender"]:checked', '#Demo').val());
        });
    });
Brad Larson
quelle
4

Ich weiß, dass ich so spät dazukomme. Aber es ist erwähnenswert, dass es braucht

<label class="custom-control-label" for="myRadioBtnName">Personal Radio Button</label>

Und dann habe ich das in meinem js überprüft. Es könnte so sein

$(document).ready(function () { 

$("#MyRadioBtnOuterDiv").click(function(){
    var radioValue = $("input[name=myRadioButtonNameAttr]:checked").val();
    if(radioValue === "myRadioBtnName"){
        $('#showMyRadioArea').show();
    }else if(radioValue === "yourRadioBtnName"){
        $('#showYourRadioArea').show();
    }
});
});

`

Ashish
quelle
3
<div id="subscriptions">
 Company Suscription: <input type="radio" name="subsrad" value="1">
 Customer Subscription:<input type="radio" name="subsrad" value="2">
 Manully Set:<input type="radio" name="subsrad" value="MANUAL">
 NO Subscription:<input type="radio" name="subsrad" value="0">
 </div>

und behandeln Sie jquery for alert wie für den Wert, der durch div id gesetzt / geändert wurde:

$("#subscriptions input") // select the radio by its id
    .on('change', function(){ // bind a function to the change event
    alert($('input[name="subsrad"]:checked', '#subscriptions').val());
            });

Es ist so einfach....:-}

Badal
quelle
Eine einfachere Möglichkeit, dies mit der übergeordneten ID zu tun, wäre .... $ ("# subscriptions"). On ("change", function () {var selection = $ (this) .find ("input: checked") .val (); alert (Auswahl);});
MistyDawn
3

Ein weiterer einfacher Weg zu verstehen ... Es funktioniert:

HTML Quelltext:

 <input type="radio" name="active_status" class="active_status" value="Hold">Hold 
 <input type="radio" name="active_status" class="active_status" value="Cancel">Cancel 
 <input type="radio" name="active_status" class="active_status" value="Suspend">Suspend

Jquery Code:

$(document).on("click", ".active_status", function () {
 var a = $('input[name=active_status]:checked').val();  
 (OR)   
 var a = $('.active_status:checked').val();
 alert(a);
});
Vijay Deva
quelle
3

Optionsfeld für mehrere Gruppen verdeckter Wert für Array

var arr = [];
    function r(n) {


        var section = $('input:radio[name="' + n + '"]:checked').val();
        arr[n] = section;

        console.log(arr)
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" onchange="r('b1')" class="radioID" name="b1" value="1">1
<input type="radio" onchange="r('b1')"  class="radioID" name="b1" value="2"  >2
<input type="radio" onchange="r('b1')"   class="radioID" name="b1" value="3">3

<br>

<input type="radio" onchange="r('b2')" class="radioID2" name="b2" value="4">4
<input type="radio" onchange="r('b2')"  class="radioID2" name="b2" value="5"  >5
<input type="radio" onchange="r('b2')"   class="radioID2" name="b2" value="6">6

ali leider
quelle
Können Sie bitte eine Erklärung hinzufügen, damit mehr Menschen verstehen können?
Shanteshwar Inde
2

Ich bin keine Javascript-Person, aber ich habe hier gefunden, um dieses Problem zu suchen. Für diejenigen, die es googeln und hier finden, hoffe ich, dass dies einigen hilft. Also, wie in Frage, wenn wir eine Liste von Optionsfeldern haben:

<div class="list">
    <input type="radio" name="b1" value="1">
    <input type="radio" name="b2" value="2" checked="checked">
    <input type="radio" name="b3" value="3">
</div>

Ich kann finden, welche mit diesem Selektor ausgewählt wurde:

$('.list input[type="radio"]:checked:first').val();

Auch wenn kein Element ausgewählt ist, wird immer noch kein undefinierter Fehler angezeigt. Sie müssen also keine zusätzliche if-Anweisung schreiben, bevor Sie den Wert des Elements übernehmen.

Hier ist ein sehr einfaches Beispiel für jsfiddle .

Yusuf Uzun
quelle
1
Dies ist eine falsche Verwendung des Namensattributs für Funkeingänge. Optionsfelder in einer Gruppe müssen denselben Namen haben, wenn Sie nur einen einzelnen Wert aus der Gruppe zulassen möchten. Wenn Sie dies auf diese Weise tun, funktioniert es wie Kontrollkästchen und ermöglicht mehrere Auswahlen anstelle einer einzelnen Auswahl innerhalb der Gruppe.
MistyDawn
@MistyDawn du hast recht, ich erinnere mich nicht einmal, wie ich das geschrieben habe, wahrscheinlich weil ich einen Fehler behoben habe.
Yusuf Uzun
2

Hier sind 2 Optionsfelder, nämlich rd1 und Radio1

<input type="radio" name="rd" id="rd1" />
<input type="radio" name="rd" id="Radio1" /> 

Der einfachste Weg, um zu überprüfen, welches Optionsfeld aktiviert ist, indem Sie eine einzelne Person überprüfen, ist die Eigenschaft (": checked")

if ($("#rd1").is(":checked")) {
      alert("rd1 checked");
   }
 else {
      alert("rd1 not checked");
   }
Mohan
quelle
Dies ist keine sehr robuste Lösung. Es ist besser, nur ein enthaltenes Div zu haben und dann alle Radios darunter anzusehen und das aktivierte auszuwählen. Sie können sich auch alle Radios mit einem bestimmten Namen ansehen und dann das markierte finden. Dies reduziert die Notwendigkeit, den Code jedes Mal zu ändern, wenn eine Schaltfläche hinzugefügt wird.
Richard Duerr
Wenn Ihre Seite mehr als 2 Funkeingänge hat, kann dies SEHR verwirrend werden und das Zuweisen einer ID zu jedem einzelnen Funkgerät wäre sehr zeitaufwändig. Diese Methode wird normalerweise nicht als bewährte Methode angesehen.
MistyDawn
2

Auch inputist nicht notwendig, wie in anderen Antworten vorgeschlagen. Der folgende Code kann ebenfalls verwendet werden:

var variable_name = $("[name='radio_name']:checked").val();
shivamag00
quelle
Dies entspricht im Wesentlichen dieser Antwort von vor fünf Jahren, nur ohne inputund mit unnötigen Anführungszeichen.
Heretic Monkey
Diese Zitate sind nicht unnötig und der Grund, warum ich die obige Antwort gepostet habe, ist, die Leute wissen zu lassen, dass Eingaben nicht notwendig sind
shivamag00
Dann sollten Sie Ihre Frage bearbeiten , um diese Gründe zu erwähnen, anstatt den Befehl "Verwenden Sie den folgenden Code" zu verwenden. Möglicherweise möchten Sie auf eine Quelle verweisen, aus der hervorgeht, dass die Anführungszeichen erforderlich sind.
Heretic Monkey
@HereticMonkey Fertig die Bearbeitung ... Danke :)
shivamag00
1
    <input type="radio" name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >

$(function() {
      $("#submit").click(function() {
        alert($('input[name=s_2_1_6_0]:checked').val());
      });
    });`
Sandeep Kumar
quelle
1
HTML Code
<input id="is_verified" class="check" name="is_verified" type="radio" value="1"/>
<input id="is_verified" class="check" name="is_verified" type="radio" checked="checked" value="0"/>
<input id="submit" name="submit" type="submit" value="Save" />

Javascript Code
$("input[type='radio'].check").click(function() {
    if($(this).is(':checked')) {
        if ($(this).val() == 1) {
            $("#submit").val("Verified & Save");
        }else{
            $("#submit").val("Save");
        }
    }
});
Md. Sohel Rana
quelle
1

Falls Sie den spezifischen Namen nicht kennen oder alle Funkeingänge in einem Formular überprüfen möchten, können Sie mit einer globalen Variable den Wert für jede Funkgruppe nur einmal überprüfen: `

        var radio_name = "";
        $("form).find(":radio").each(function(){
            if (!radio_name || radio_name != $(this).attr('name')) {
                radio_name = $(this).attr('name');
                var val = $('input[name="'+radio_name+'"]:checked').val();
                if (!val) alert($('input[name="'+radio_name+'"]:checked').val());
            }
        });`
Steffen
quelle