Einstellen der Funkoption beim Laden mit jQuery

297

Wie kann ich festlegen, dass die Funkoption beim Laden mit jQuery überprüft wird?

Sie müssen überprüfen, ob kein Standard festgelegt ist, und dann einen Standard festlegen

Phill Pafford
quelle
1
@ryenus wäre die andere Frage nicht ein Duplikat von mir, da ich meine vor der anderen Frage gestellt habe?
Phill Pafford

Antworten:

558

Angenommen, Sie hatten Optionsfelder wie diese, zum Beispiel:

<input type='radio' name='gender' value='Male'>
<input type='radio' name='gender' value='Female'>

Und Sie wollten die mit dem Wert "Male" onload überprüfen, wenn kein Radio aktiviert ist:

$(function() {
    var $radios = $('input:radio[name=gender]');
    if($radios.is(':checked') === false) {
        $radios.filter('[value=Male]').prop('checked', true);
    }
});
Paolo Bergantino
quelle
Ich frage mich nur, Paolo, IIRC, die Spezifikation besagt, dass das geprüfte Attribut geprüft werden soll = "geprüft" (obwohl ich mich möglicherweise irre). Wird jQuery in diesem Beispiel in "geprüft" übersetzt? Einfach nur neugierig ...
alex
8
Mein ursprüngliches Beispiel hatte "geprüft", "geprüft", es ist eines der Dinge, an die ich mich nie erinnern kann, welches richtig ist. jQuery findet es so oder so heraus, aber ich weiß, wenn Sie das tatsächlich überprüfte Attribut eines DOM-Elements festlegen möchten, sollte es ein boolescher Wert sein, wie document.getElementById ('x'). checked = true; - Also ging ich damit.
Paolo Bergantino
Ich möchte nur diese eckige Klammer hinzufügen. [Name = Geschlecht] funktioniert nicht im Standardbrowser von Windows Phone 7.
最 白 目
Ich habe es gerade mit FF und jQuery 1.9.1 und .attr ausprobiert ('geprüft', wahr); funktioniert jedoch nicht .prop ('geprüft', wahr); tut. Schauen Sie sich stackoverflow.com/questions/4618733/… an (Duplikat?)
IARI
Eine kurze: NICHT $radios.removeAttr('checked')vor der Requisite verwenden. Es wird den Browser und die veröffentlichten Werte verwirren.
Igasparetto
109

Wie wäre es mit einem Einzeiler?

$('input:radio[name="gender"]').filter('[value="Male"]').attr('checked', true);
Andrew McCombe
quelle
Das Obige ist besser, da es komplexere Namenswerte unterstützt.
J. Martin
13
Dies beantwortet die ops-Frage nicht vollständig - es muss zuerst überprüft werden, ob eine Standardoption bereits aktiviert ist. Außerdem sollten Sie jetzt prop () anstelle von attr () für solche Dinge verwenden. Erläuterungen finden Sie im Abschnitt "Attribute vs. Eigenschaften" hier: api.jquery.com/prop . Außerdem ist kein zusätzlicher Filter erforderlich. Sie können einfach die beiden Selektoren kombinieren, z. B. $ ("Eingabe [Name = Geschlecht] [Wert = Männlich]"). Prop ("markiert", true);
Jackocnr
3
Diese Lösung funktioniert zum ersten Mal, wenn ich das Radio einstelle, schlägt jedoch danach fehl. Durch die Verwendung von "prop" anstelle von "attr" funktioniert es perfekt. Also: $ ('Eingabe: Radio [Name = "Geschlecht"]'). Filter ('[Wert = "Männlich"]'). Prop ('geprüft', wahr);
Andrew
2
Richtig - prop () ist jetzt die empfohlene Methode für den Zugriff auf Eigenschaften.
Andrew McCombe
1
Einfacher: $ ('Eingabe: Radio [Name = "Geschlecht"] [Wert = "Männlich"]'). Attr ('geprüft', wahr);
Régis
52

Dieser verursacht den Fehler form.reset ():

$('input:radio[name=gender][value=Male]').attr('checked', true);

Aber dieser funktioniert:

$('input:radio[name=gender][value=Male]').click();
Chaiko
quelle
5
Ich würde empfehlen, dass Sie Trigger ('Klick') etwas lesbarer verwenden und einen Methodenaufruf stoppen.
Barkermn01
35

JQuery bietet zwei Möglichkeiten, den aktivierten Status für Radio und Kontrollkästchen festzulegen. Dies hängt davon ab, ob Sie das Wertattribut im HTML-Markup verwenden oder nicht:

Wenn sie ein Wertattribut haben:

$("[name=myRadio]").val(["myValue"]);

Wenn sie kein Wertattribut haben:

$("#myRadio1").prop("checked", true);

Mehr Details

Im ersten Fall geben wir die gesamte Funkgruppe mit dem Namen an und weisen JQuery an, das Funkgerät zu finden, das mit der Val-Funktion ausgewählt werden soll. Die val-Funktion nimmt ein 1-Element-Array und findet das Radio mit dem übereinstimmenden Wert. Setzen Sie das Checked = True. Andere mit demselben Namen würden abgewählt. Wenn kein Radio mit übereinstimmendem Wert gefunden wird, werden alle abgewählt. Wenn es mehrere Funkgeräte mit demselben Namen und Wert gibt, wird das letzte ausgewählt und andere abgewählt.

Wenn Sie das Wertattribut für Funk nicht verwenden, müssen Sie eine eindeutige ID verwenden, um ein bestimmtes Funkgerät in der Gruppe auszuwählen. In diesem Fall müssen Sie die Prop-Funktion verwenden, um die Eigenschaft "Überprüft" festzulegen. Viele Leute verwenden kein Wertattribut mit Kontrollkästchen, daher ist # 2 eher für Kontrollkästchen als für Radios geeignet. Da Kontrollkästchen keine Gruppe bilden, wenn sie denselben Namen haben, können Sie auch $("[name=myCheckBox").prop("checked", true);Kontrollkästchen aktivieren.

Sie können mit diesem Code hier spielen: http://jsbin.com/OSULAtu/1/edit?html,output

Shital Shah
quelle
22

Mir hat die Antwort von @Amc gefallen. Ich fand, dass der Ausdruck weiter komprimiert werden konnte, um keinen filter () -Aufruf zu verwenden (@chaiko bemerkte dies anscheinend auch). Prop () ist auch der richtige Weg zu attr () für jQuery v1.6 +. In der jQuery-Dokumentation zu prop () finden Sie die offiziellen Best Practices zu diesem Thema.

Betrachten Sie die gleichen Eingabe-Tags aus der Antwort von @Paolo Bergantino.

<input type='radio' name='gender' value='Male'>
<input type='radio' name='gender' value='Female'>

Der aktualisierte Einzeiler könnte Folgendes lesen:

$('input:radio[name="gender"][value="Male"]').prop('checked', true);
Clayzermk1
quelle
15

Ich denke, Sie können davon ausgehen, dass dieser Name eindeutig ist und alle Funkgeräte in der Gruppe denselben Namen haben. Dann können Sie die jQuery-Unterstützung folgendermaßen nutzen:

$("[name=gender]").val(["Male"]);

Hinweis: Das Übergeben eines Arrays ist wichtig.

Konditionierte Version:

if (!$("[name=gender]:checked").length) {
    $("[name=gender]").val(["Male"]);
}
Saram
quelle
1
Das ist schlecht, wenn Sie jedes Element nach einem Wert
durchsuchen, von dem
@MartinBarker Kannst du erklären, was ihr Männer durch "Scannen" macht?
Saram
Wenn Sie im DOM nur ein Attribut verwenden, das jQuery dazu zwingt, jedes Element im DOM zu durchsuchen und zu prüfen, ob es mit dem übereinstimmt, als ob Sie es verwenden $("*")würden, würde es mit allem übereinstimmen, sodass Sie einen Typ bei Lease $("input")oder eine ID verwenden sollten
Seien Sie
@ MartinBarker - ich stimme zu. Normalerweise stelle ich dem Selektor eine Formular-ID voran oder gebe einen Kontextparameter an. Derzeit ist das Scannen von DOM kein jQuery-Aufwand, sondern die interne Browser-Engine document.querySelectorAllerledigt alle Aufgaben.
Saram
Um die oben genannten Bedenken auszuräumen, verwenden Sie $("input[name=gender]")oder $("input[name=gender]:radio")oder (für moderne Browser)$("input[name=gender][type=radio]")
David Balažic
7

Wenn Sie möchten, dass es wirklich dynamisch ist, und das Radio auswählen, das den eingehenden Daten entspricht, funktioniert dies. Es wird der Geschlechtswert der übergebenen Daten verwendet oder der Standardwert verwendet.

if(data['gender'] == ''){
 $('input:radio[name="gender"][value="Male"]').prop('checked', true);
}else{
  $('input:radio[name="gender"][value="' + data['gender'] +'"]').prop('checked', true);
};
WildSpidee
quelle
5

Native JS-Lösung:

 document.querySelector('input[name=gender][value=Female]').checked = true;

http://jsfiddle.net/jzQvH/75/

HTML:

<input type='radio' name='gender' value='Male'> Male
<input type='radio' name='gender' value='Female'>Female
Razan Paul
quelle
3

Und wenn Sie einen Wert aus Ihrem Modell übergeben und ein Optionsfeld aus der Gruppe beim Laden basierend auf dem Wert auswählen möchten, verwenden Sie:

Jquery:

var priority = Model.Priority; //coming for razor model in this case
var allInputIds = "#slider-vertical-" + itemIndex + " fieldset input";

$(allInputIds).val([priority]); //Select at start up

Und das HTML:

<div id="@("slider-vertical-"+Model.Id)">
 <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
    <input type="radio" name="@("radio-choice-b-"+Model.Id)" id="@("high-"+Model.Id)" value="1" checked="checked">
    <label for="@("high-"+Model.Id)" style="width:100px">@UIStrings.PriorityHighText</label>

    <input type="radio" name="@("radio-choice-b-"+Model.Id)" id="@("medium-"+Model.Id)" value="2">
    <label for="@("medium-"+Model.Id)" style="width:100px">@UIStrings.PriorityMediumText</label>

    <input type="radio" name="@("radio-choice-b-"+Model.Id)" id="@("low-"+Model.Id)" value="3">
    <label for="@("low-"+Model.Id)" style="width:100px">@UIStrings.PriorityLowText</label>
 </fieldset>
</div>
Iftikhar
quelle
2

Brauche das alles nicht. Mit einfachem und altem HTML können Sie erreichen, was Sie wollen. Wenn Sie das gewünschte Radio standardmäßig wie folgt überprüfen lassen:
<input type='radio' name='gender' checked='true' value='Male'>
Wenn die Seite geladen wird, wird es überprüft.

Carlos Torres
quelle
3
Ja, aber ich muss es dynamisch sein, da die verweisende Site beim Laden der Seite die Standardeinstellungen übergeben würde. Es ist schon eine Weile her, dass ich über diese Frage nachgedacht habe, also hoffe ich zu verstehen, was Sie sagen wollen
Phill Pafford
2
 $("form input:[name=gender]").filter('[value=Male]').attr('checked', true);
Anfänger zu jquery
quelle
6
Bitte posten Sie keine Nur-Code-Antworten. Bitte geben Sie auch eine Erklärung.
Lee Taylor
2

Hier ist ein Beispiel mit den oben genannten Methoden:

<div class="ui-field-contain">
<fieldset data-role="controlgroup" data-type="horizontal">    <legend>Choose a pet:</legend>
    <input type="radio" name="radio-choice-2" id="radio-choice-1" value="choice1">
    <label for="radio-choice-1">Cat</label>

    <input type="radio" name="radio-choice-2" id="radio-choice-2" value="choice2">
    <label for="radio-choice-2">Dog</label>

    <input type="radio" name="radio-choice-2" id="radio-choice-3" value="choice3">
    <label for="radio-choice-3">Hamster</label>

    <input type="radio" name="radio-choice-2" id="radio-choice-4" value="choice4">
    <label for="radio-choice-4">Lizard</label>
  </fieldset>
</div>

In Javascript:

$("[name = 'radio-choice-2'][value='choice3']").prop('checked', true).checkboxradio('refresh');
Karma
quelle
1

Beachten Sie dieses Verhalten beim Abrufen von Funkeingangswerten:

$('input[name="myRadio"]').change(function(e) { // Select the radio input group

    // This returns the value of the checked radio button
    // which triggered the event.
    console.log( $(this).val() ); 

    // but this will return the first radio button's value,
    // regardless of checked state of the radio group.
    console.log( $('input[name="myRadio"]').val() ); 

});

Gibt $('input[name="myRadio"]').val()also nicht den erwarteten Wert des Funkeingangs zurück, wie Sie es erwarten könnten - er gibt den Wert des ersten Optionsfelds zurück.

Bradley Flood
quelle
1

De esta forma Jquery obtiene solo el elemento geprüft

$('input[name="radioInline"]:checked').val()
Julian M.
quelle
2
Sie müssen Ihre Antwort beschreiben und Ihren Code formatieren
Michael
0

// Wenn Sie es mit Javascript oder einem Framework wie Backbone machen, werden Sie häufig darauf stoßen, dass Sie so etwas haben könnten

$MobileRadio = $( '#mobileUrlRadio' );

während

$MobileRadio.checked = true;

wird nicht funktionieren,

$MobileRadio[0].checked = true;

werden.

Ihr Selektor kann auch wie die anderen oben empfohlenen sein.

JrBriones
quelle
0

Dies funktioniert für mehrere Optionsfelder

$('input:radio[name="Aspirant.Gender"][value='+jsonData.Gender+']').prop('checked', true);
Hari Lakkakula
quelle