Wie kann ich wissen, welches Optionsfeld über jQuery ausgewählt ist?

2704

Ich habe zwei Optionsfelder und möchte den Wert des ausgewählten Optionsfelds veröffentlichen. Wie kann ich den Wert mit jQuery erhalten?

Ich kann sie alle so bekommen:

$("form :radio")

Woher weiß ich, welches ausgewählt ist?

Juan
quelle

Antworten:

3933

So ermitteln Sie den Wert des ausgewählten radioName Elements eines Formulars mit der ID myForm:

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

Hier ist ein Beispiel:

$('#myForm input').on('change', function() {
   alert($('input[name=radioName]:checked', '#myForm').val()); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
  <input type="radio" name="radioName" value="1" /> 1 <br />
  <input type="radio" name="radioName" value="2" /> 2 <br />
  <input type="radio" name="radioName" value="3" /> 3 <br />
</form>

Peter J.
quelle
306
Am Ende habe ich Folgendes verwendet: $ ('Formulareingabe [Typ = Radio]: Aktiviert')
Juan
46
@PeterJ: Warum hast du zwei Argumente anstelle von einfach verwendet '#myform input[name=radioName]:checked'?
Sophie Alpert
145
jQuery bietet die beste Leistung, wenn der Gültigkeitsbereich korrekt ist, und die Auswahl nach ID ist immer die Auswahl mit der höchsten Leistung. Die Zwei-Argumente-Methode ist einfach eine andere Möglichkeit.
Peter J
40
Für eine optimale Leistung wird in der Dokumentation empfohlen, den Funkwähler nicht zu verwenden. api.jquery.com/radio-selector
Peter J
2
Alternative: $ ('. ClassName: checked');
Meetai.com
410

Benutze das..

$("#myform input[type='radio']:checked").val();
Joberror
quelle
64
Wenn Ihr Formular mehrere Optionsfelder enthält, wird nur der Wert des ersten Satzes angezeigt, denke ich.
Brad
3
Dies gibt nur den Wert des ersten Optionsfelds zurück, das im Formular aktiviert ist. Es sollte so gemacht werden, wie es Peter J vorgeschlagen hat.
MickJ
3
@MickJ Dieser Code ist der gleiche wie der von Peter J ... In Anbetracht des Anwendungsfalls der ursprünglichen Frage. Wenn Sie jedoch verschiedene Gruppen von Optionsfeldern haben, funktioniert dies nicht. Deshalb ist es viel besser, [name = selector] zu verwenden
Lyth
1
Wie @Brad erwähnt, erhält dies nur den Wert des ersten Satzes. Sie möchten ".val ()" durch ".map (function () {return this.value;}). Get ();" ersetzen.
am_
1
Für das, was es wert ist (ja, ich weiß, dass es optimiert werden muss, bevor es benötigt wird), aber für reine Leistung funktioniert dies schneller, insbesondere in älteren Browsern:$("#myform").find("input[type='radio']:checked").val();
Mark Schultheiss
307

Wenn Sie bereits einen Verweis auf eine Optionsfeldgruppe haben, zum Beispiel:

var myRadio = $("input[name=myRadio]");

Verwenden Sie die filter()Funktion nicht find(). ( find()dient zum Auffinden von untergeordneten / untergeordneten Elementen, während Elemente der filter()obersten Ebene in Ihrer Auswahl durchsucht werden.)

var checkedValue = myRadio.filter(":checked").val();

Anmerkungen: Diese Antwort korrigierte ursprünglich eine andere Antwort, deren Verwendung empfohlen wurde find()und die seitdem geändert worden zu sein scheint. find()könnte immer noch nützlich sein für die Situation, in der Sie bereits einen Verweis auf ein Containerelement hatten, aber nicht auf die Optionsfelder, z.

var form = $("#mainForm");
...
var checkedValue = form.find("input[name=myRadio]:checked").val();
Matt Browne
quelle
7
Ich wollte der Klarheit halber nur hinzufügen, dass find () tatsächlich alle absteigenden Elemente durchsucht (die mit dem angegebenen Selektor übereinstimmen). Wenn Sie nur direkte Kinder möchten, verwenden Sie children ().
Matt Browne
139

Das sollte funktionieren:

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

Beachten Sie das "", das um die Eingabe verwendet wird: aktiviert und nicht wie die Lösung von Peter J.

Cam Tullos
quelle
Dies sollte die ausgewählte Antwort sein. Name ist eine sehr schöne Möglichkeit, um
Optionsfelder
79

Sie können den markierten Selektor zusammen mit dem Radio-Selektor verwenden.

 $("form:radio:checked").val();
Tvanfosson
quelle
13
Dies sieht gut aus. In der jQuery-Dokumentation wird jedoch empfohlen, [type = radio] anstelle von: radio zu verwenden, um eine bessere Leistung zu erzielen. Es ist ein Kompromiss zwischen Lesbarkeit und Leistung. Normalerweise übernehme ich in solchen trivialen Angelegenheiten die Lesbarkeit über die Leistung, aber in diesem Fall denke ich, dass [Typ = Radio] tatsächlich klarer ist. In diesem Fall würde es also wie $ aussehen ("Formulareingabe [Typ = Radio]: markiert"). Val (). Trotzdem eine gültige Antwort.
Keine
57

Wenn Sie nur den booleschen Wert möchten, dh ob er aktiviert ist oder nicht, versuchen Sie Folgendes:

$("#Myradio").is(":checked")
Juan
quelle
53

Holen Sie sich alle Radios:

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

Filtern Sie, um den zu überprüfen

radios.filter(":checked")
Alex V.
quelle
48

Eine weitere Option ist:

$('input[name=radioName]:checked').val()
Roter Drache
quelle
6
Der Teil ": radio" ist hier nicht erforderlich.
Matt Browne
31
$("input:radio:checked").val();
Phillip Senn
quelle
25

Hier ist, wie ich das Formular schreiben und mit dem Abrufen des überprüften Radios umgehen würde.

Verwenden eines Formulars namens myForm:

<form id='myForm'>
    <input type='radio' name='radio1' class='radio1' value='val1' />
    <input type='radio' name='radio1' class='radio1' value='val2' />
    ...
</form>

Holen Sie sich den Wert aus dem Formular:

$('#myForm .radio1:checked').val();

Wenn Sie das Formular nicht veröffentlichen, würde ich es weiter vereinfachen, indem ich Folgendes verwende:

<input type='radio' class='radio1' value='val1' />
<input type='radio' class='radio1' value='val2' />

Das Erhalten des überprüften Werts wird dann:

    $('.radio1:checked').val();

Wenn ich einen Klassennamen auf der Eingabe habe, kann ich die Eingaben einfach formatieren ...

Darin Peterson
quelle
24

In meinem Fall habe ich zwei Optionsfelder in einem Formular und wollte den Status jedes Optionsfelds wissen. Das unten hat bei mir funktioniert:

// get radio buttons value
console.log( "radio1: " +  $('input[id=radio1]:checked', '#toggle-form').val() );
console.log( "radio2: " +  $('input[id=radio2]:checked', '#toggle-form').val() );


    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="toggle-form">
  <div id="radio">
    <input type="radio" id="radio1" name="radio" checked="checked" /><label for="radio1">Plot single</label>
    <input type="radio" id="radio2" name="radio"/><label for="radio2">Plot all</label>
  </div>
</form>

rmbianchi
quelle
1
Was meinst du mit dem Status jeder Schaltfläche? Mit gleichnamigen Optionsfeldern kann nur eines aktiviert werden. Wenn Sie das aktivierte Kontrollkästchen erhalten, wird der Rest deaktiviert.
Dementic
17

In einem von JSF generierten Optionsfeld (mit <h:selectOneRadio>Tag) können Sie Folgendes tun:

radiobuttonvalue = jQuery("input[name='form_id\:radiobutton_id']:checked").val();

Dabei ist die selectOneRadio-ID radiobutton_id und die Formular-ID form_id .

Stellen Sie sicher , dass Sie wie angegeben den Namen anstelle der ID verwenden , da jQuery dieses Attribut verwendet (der Name wird automatisch von JSF generiert, das der Steuerelement-ID ähnelt).

Francisco Alvarado
quelle
15

Überprüfen Sie auch, ob der Benutzer nichts auswählt.

var radioanswer = 'none';
if ($('input[name=myRadio]:checked').val() != null) {           
   radioanswer = $('input[name=myRadio]:checked').val();
}
Kennzeichen
quelle
15

Ich habe ein jQuery-Plugin zum Festlegen und Abrufen von Optionsfeldwerten geschrieben. Es respektiert auch das "Änderungs" -Ereignis auf ihnen.

(function ($) {

    function changeRadioButton(element, value) {
        var name = $(element).attr("name");
        $("[type=radio][name=" + name + "]:checked").removeAttr("checked");
        $("[type=radio][name=" + name + "][value=" + value + "]").attr("checked", "checked");
        $("[type=radio][name=" + name + "]:checked").change();
    }

    function getRadioButton(element) {
        var name = $(element).attr("name");
        return $("[type=radio][name=" + name + "]:checked").attr("value");
    }

    var originalVal = $.fn.val;
    $.fn.val = function(value) {

        //is it a radio button? treat it differently.
        if($(this).is("[type=radio]")) {

            if (typeof value != 'undefined') {

                //setter
                changeRadioButton(this, value);
                return $(this);

            } else {

                //getter
                return getRadioButton(this);

            }

        } else {

            //it wasn't a radio button - let's call the default val function.
            if (typeof value != 'undefined') {
                return originalVal.call(this, value);
            } else {
                return originalVal.call(this);
            }

        }
    };
})(jQuery);

Platzieren Sie den Code an einer beliebigen Stelle, um das Add-In zu aktivieren. Dann genieße es! Es überschreibt nur die Standard-Val-Funktion, ohne etwas zu beschädigen.

Sie können diese jsFiddle besuchen, um sie in Aktion auszuprobieren und zu sehen, wie sie funktioniert.

Geige

Mathias Lykkegaard Lorenzen
quelle
14

Wenn Sie mehrere Optionsfelder in einer Form haben, dann

var myRadio1 = $('input[name=radioButtonName1]');
var value1 = myRadio1.filter(':checked').val();

var myRadio2 = $('input[name=radioButtonName2]');
var value2 = myRadio2.filter(':checked').val();

Das funktioniert bei mir.

Ramesh
quelle
12
 $(".Stat").click(function () {
     var rdbVal1 = $("input[name$=S]:checked").val();
 }
Swadesh Bhattacharya
quelle
12

Das funktioniert gut

$('input[type="radio"][class="className"]:checked').val()

Arbeitsdemo

Der :checkedSelektor arbeitet für checkboxes, radio buttonsund Elemente auswählen. Verwenden Sie nur für ausgewählte Elemente den :selectedSelektor.

API für :checked Selector

Manoj
quelle
11

So ermitteln Sie den Wert des ausgewählten Radios, das eine Klasse verwendet:

$('.class:checked').val()
Rodrigo Dias
quelle
10

Ich benutze dieses einfache Skript

$('input[name="myRadio"]').on('change', function() {
  var radioValue = $('input[name="myRadio"]:checked').val();        
  alert(radioValue); 
});
Lafif Astahdziq
quelle
Verwenden Sie das Klickereignis anstelle des Änderungsereignisses, wenn es in allen Browsern funktionieren soll
Matt Browne,
10

Benutze das:

value = $('input[name=button-name]:checked').val();
jeswin
quelle
8

DEMO : https://jsfiddle.net/ipsjolly/xygr065w/

	$(function(){
	    $("#submit").click(function(){      
	        alert($('input:radio:checked').val());
	    });
	 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
       <tr>
         <td>Sales Promotion</td>
         <td><input type="radio" name="q12_3" value="1">1</td>
         <td><input type="radio" name="q12_3" value="2">2</td>
         <td><input type="radio" name="q12_3" value="3">3</td>
         <td><input type="radio" name="q12_3" value="4">4</td>
         <td><input type="radio" name="q12_3" value="5">5</td>
      </tr>
    </table>
<button id="submit">submit</button>

Code Spy
quelle
6

Wenn Sie nur 1 Optionsfeld in einem Formular haben, ist der jQuery-Code so einfach:

$( "input:checked" ).val()
Randy Greencorn
quelle
5

Ich habe eine Bibliothek veröffentlicht, um dabei zu helfen. Ruft tatsächlich alle möglichen Eingabewerte ab, enthält aber auch, welches Optionsfeld aktiviert wurde. Sie können es unter https://github.com/mazondo/formalizedata überprüfen

Es gibt Ihnen ein js-Objekt der Antworten, also eine Form wie:

<form>
<input type="radio" name"favorite-color" value="blue" checked> Blue
<input type="radio" name="favorite-color" value="red"> Red
</form>

werde dir geben:

$("form").formalizeData()
{
  "favorite-color" : "blue"
}
Ryan
quelle
4

Verwenden Sie den folgenden jQuery-Code, um alle Optionsfeldwerte im JavaScript-Array abzurufen:

var values = jQuery('input:checkbox:checked.group1').map(function () {
    return this.value;
}).get();
Nilesh
quelle
2
Optionsfelder sind nicht mit Kontrollkästchen identisch. In diesem Beispiel werden Kontrollkästchen verwendet.
Matt Browne
4

Versuch es-

var radioVal = $("#myform").find("input[type='radio']:checked").val();

console.log(radioVal);
Gautam Rai
quelle
4

JQuery, um alle Optionsfelder im Formular und den aktivierten Wert abzurufen.

$.each($("input[type='radio']").filter(":checked"), function () {
  console.log("Name:" + this.name);
  console.log("Value:" + $(this).val());
});
Iyyappan Amirthalingam
quelle
3

Ein anderer Weg, um es zu bekommen:

 $("#myForm input[type=radio]").on("change",function(){
   if(this.checked) {
    alert(this.value);
    }
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
   <span><input type="radio" name="q12_3" value="1">1</span><br>
   <span><input type="radio" name="q12_3" value="2">2</span>
</form>

Mehdi Bouzidi
quelle
2
$(function () {
// Someone has clicked one of the radio buttons
var myform= 'form.myform';
$(myform).click(function () {
    var radValue= "";
    $(this).find('input[type=radio]:checked').each(function () {
        radValue= $(this).val();
    });
  })
});
JoshYates1980
quelle
1

Aus dieser Frage heraus habe ich eine alternative Möglichkeit gefunden, auf die aktuell ausgewählte zuzugreifen, inputwenn Sie sich innerhalb eines clickEreignisses für das jeweilige Label befinden. Der Grund dafür ist, dass das neu ausgewählte inputerst nach dem labelKlickereignis aktualisiert wird .

TL; DR

$('label').click(function() {
  var selected = $('#' + $(this).attr('for')).val();

  ...
});

Patrick Roberts
quelle
1

Was ich tun musste, war, den C # -Code zu vereinfachen, dh so viel wie möglich im Front-End-JavaScript zu tun. Ich verwende einen Fieldset-Container, weil ich in DNN arbeite und er eine eigene Form hat. Ich kann also kein Formular hinzufügen.

Ich muss testen, welches von 3 Textfeldern verwendet wird, und wenn ja, welche Art von Suche? Beginnt mit dem Wert, Enthält den Wert, Genaue Übereinstimmung des Werts.

HTML:

<fieldset id="fsPartNum" class="form-inline">
<div class="form-group">
    <label for="txtPartNumber">Part Number:</label>
    <input type="text" id="txtPartNumber" class="input-margin-pn" />
</div>
<div class="form-group">
    <label for="radPNStartsWith">Starts With: </label>
    <input type="radio" id="radPNStartsWith" name="partNumber" checked  value="StartsWith"/>
</div>
<div class="form-group">
    <label for="radPNContains">Contains: </label>
    <input type="radio" id="radPNContains" name="partNumber" value="Contains" />
</div>
<div class="form-group">
    <label for="radPNExactMatch">Exact Match: </label>
    <input type="radio" id="radPNExactMatch" name="partNumber" value="ExactMatch" />
</div>

Und mein JavaScript ist:

        alert($('input[name=partNumber]:checked', '#fsPartNum').val()); 
    if(txtPartNumber.val() !== ''){
        message = 'Customer Part Number';
    }
    else if(txtCommercialPartNumber.val() !== ''){

    }
    else if(txtDescription.val() !== ''){

    }

Es kann nur gesagt werden, dass ein Tag mit einer ID enthalten ist. Für DNNer ist dies gut zu wissen. Das Endziel hierbei ist die Übergabe an den Code der mittleren Ebene, der zum Starten einer Teilesuche in SQL Server erforderlich ist.

Auf diese Weise muss ich auch nicht den viel komplizierteren vorherigen C # -Code kopieren. Das schwere Heben wird genau hier durchgeführt.

Ich musste ein bisschen danach suchen und dann daran basteln, damit es funktioniert. Für andere DNNer ist dies hoffentlich leicht zu finden.

user1585204
quelle