wake-up-neo.com

wie wird die Radiooption beim Laden mit jQuery aktiviert?

Wie kann ich die Radiooption beim Laden mit jQuery prüfen? 

Prüfen Sie, ob kein Standard festgelegt ist, und legen Sie dann einen Standard fest

280
Phill Pafford

Angenommen, Sie hatten Optionsfelder wie diese:

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

Und Sie wollten den Wert mit dem Wert "Male" prü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);
    }
});
518

Wie wäre es mit einem Liner?

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

Dies führt zu einem Fehler von form.reset ():

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

Aber das funktioniert:

$('input:radio[name=gender][value=Male]').click();
49
chaiko

In JQuery gibt es zwei Möglichkeiten, den Status für das Radio und die Kontrollkästchen festzulegen. Dies hängt davon ab, ob Sie das value-Attribut in 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 Radio mit der val-Funktion auszuwählen. Die val-Funktion nimmt ein 1-Element-Array und sucht das Funkgerät mit übereinstimmendem Wert. Andere mit demselben Namen würden abgewählt werden. Wenn kein Funkgerät mit übereinstimmendem Wert gefunden wird, werden alle abgewählt. Wenn mehrere Funkgeräte mit demselben Namen und Wert vorhanden sind, wird das letzte ausgewählt, und andere werden abgewählt.

Wenn Sie für Radio kein Wertattribut verwenden, müssen Sie eine eindeutige ID verwenden, um ein bestimmtes Radio in der Gruppe auszuwählen. In diesem Fall müssen Sie die prop-Funktion verwenden, um die Eigenschaft "checked" festzulegen. Viele Leute verwenden kein Wertattribut mit Kontrollkästchen, daher ist # 2 eher für Kontrollkästchen als für Funkgeräte anwendbar. Beachten Sie auch, dass Ankreuzfelder keine Gruppe bilden, wenn sie denselben Namen haben. Sie können $("[name=myCheckBox").prop("checked", true); für Ankreuzfelder ausführen.

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

28
Shital Shah

Die Antwort von @Amc hat mir gefallen. Ich fand, dass der Ausdruck weiter komprimiert werden konnte, um keinen filter () - Aufruf zu verwenden (@chaiko hat dies anscheinend auch bemerkt). Außerdem ist prop () der Weg, um gegen attr () für jQuery v1.6 + zu gehen, in der jQuery-Dokumentation für prop () die offiziellen Best Practices zu diesem Thema.

Beachten Sie die gleichen Eingangs-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 etwa wie folgt lauten:

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

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 so verwenden:

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

Hinweis: Das Passing eines Arrays ist wichtig.

Konditionierte Version:

if (!$("[name=gender]:checked").length) {
    $("[name=gender]").val(["Male"]);
}
14
Saram

Wenn Sie möchten, dass es wirklich dynamisch ist und das Funkgerät auswählen, das den eingehenden Daten entspricht, funktioniert dies. Dabei wird der Gender-Wert 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);
};
7
WildSpidee

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
4
Razan Paul

Wenn Sie einen Wert aus Ihrem Modell übergeben möchten und ein Optionsfeld aus der Gruppe auswählen möchten, die auf dem Wert basiert, verwenden Sie Folgendes:

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>
3
Iftikhar
 $("form input:[name=gender]").filter('[value=Male]').attr('checked', true);
2

Hier ist ein Beispiel mit obigen 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');
2
karma

Sie brauchen nicht all das. Mit einfachen und alten HTML-Codes können Sie erreichen, was Sie möchten. Wenn Sie das Radio standardmäßig so lassen möchten:
<input type='radio' name='gender' checked='true' value='Male'>
Wenn die Seite geladen wird, wird sie geprüft.

2
Carlos Torres

Beachten Sie dieses Verhalten, wenn Sie Werte für die Funkeingabe erhalten:

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

});

$('input[name="myRadio"]').val() gibt also nicht den erwarteten Wert des Radioeingangs zurück, wie Sie vielleicht erwarten.

1
Bradley Flood

Dies funktioniert für mehrere Optionsfelder

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

De esta forma Jquery obtiene solo el elemento geprüft

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

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

$MobileRadio = $( '#mobileUrlRadio' );

während

$MobileRadio.checked = true;

wird nicht funktionieren,

$MobileRadio[0].checked = true;

werden.

ihr Selektor kann wie die anderen Jungs auch empfohlen werden.

0
JrBriones