Einstellen der Funkoption beim Laden mit jQuery

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

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);
    }
});

Wie wäre es mit einem Einzeiler?

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

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();

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

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);

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"]);
}

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);
};

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

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>

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.

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

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');

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.

De esta forma Jquery obtiene solo el elemento geprüft

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

// 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.

Dies funktioniert für mehrere Optionsfelder

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