Weisen Sie dem Optionsfeld wie aktiviert einen Anfangswert zu

138

Wie ordne ich den Wert eines Optionsfelds zunächst so zu, wie es in HTML aktiviert ist?

Rinkal Bhanderi
quelle

Antworten:

164

Sie können das checkedAttribut dafür verwenden:

<input type="radio" checked="checked">
polarblau
quelle
11
Sie können auch nur dieses Attribut ohne zugewiesenen Wert erwähnen, dh <input type = "radio" checked>
niksvp
1
@niksvp Ich glaube, geprüft = "geprüft" ist der gültige Weg, um ein Optionsfeld vorab zu überprüfen - nur "geprüft" ist kein gültiges HTML (obwohl es von den meisten Browsern unterstützt wird)
Matt Healy
9
@matthewh - nah, du kannst nur "geprüft" alleine verwenden und es ist gültiges HTML (obwohl nicht gültiges XHTML). Persönlich bevorzuge ich ‚checked =‚checked‘‘, aber Sie nicht haben , es zu benutzen ... in der Tat, es ist ein ziemlich starkes Argument gegen ihn verwenden.
Algy Taylor
55

Sie können einfach verwenden:

<input type="radio" checked />

Die Verwendung nur des überprüften Attributs ohne Angabe eines Werts ist dasselbe wie checked="checked".

seedg
quelle
Wie @Matt Healey sagte, ist die Verwendung von Checked ohne das Attribut nicht gültig. HTML
Salvob
16
@salvob falsch. Es ist nicht gültig für X- HTML, jedoch vollständig für HTML5, das so global ist wie alles, was jemals sein wird.
Chris Marisic
14

Ich habe diese Antwort auf eine ähnliche Frage gestellt, die als Duplikat dieser Frage markiert wurde. Die Antwort hat einer anständigen Anzahl von Menschen geholfen, daher dachte ich, ich würde sie auch hier für alle Fälle hinzufügen.

Dies beantwortet die Frage nicht genau, aber für jeden, der AngularJS verwendet, um dies zu erreichen, ist die Antwort etwas anders. Und tatsächlich wird die normale Antwort nicht funktionieren (zumindest nicht für mich).

Ihr HTML-Code sieht dem normalen Optionsfeld ziemlich ähnlich:

<input type='radio' name='group' ng-model='mValue' value='first' />First
<input type='radio' name='group' ng-model='mValue' value='second' /> Second

In Ihrem Controller haben Sie das deklariert, das mValueden Optionsfeldern zugeordnet ist. Um eines dieser Optionsfelder vorauszuwählen, weisen Sie die $scopeder Gruppe zugeordnete Variable dem Wert des gewünschten Eingangs zu:

$scope.mValue="second"

Dadurch wird das Optionsfeld "Zweiter" beim Laden der Seite ausgewählt.

discodane
quelle
Tatsächlich! Die obigen Antworten funktionieren nicht mit Angular JS. Ihre Antwort hat mein Problem gelöst. Vielen Dank! :)
Mitaksh Gupta
3

Für alle, die nach einer Angular2 (2.4.8) -Lösung suchen, da dies eine allgemein beliebte Frage bei der Suche ist:

<div *ngFor="let choice of choices">
  <input type="radio" [checked]="choice == defaultChoice">
</div>

Dies wird die hinzufügen checked Attribut der Eingabe unter der gegebenen Bedingung hinzugefügt, aber nichts hinzugefügt, wenn die Bedingung fehlschlägt.

Mach das nicht :

[attr.checked]="choice == defaultChoice"

weil dies das Attribut checked="false"zu jedem anderen Eingabeelement hinzufügt .

Da der Browser nur nach dem Vorhandensein des checkedAttributs (des Schlüssels ) sucht und dessen Wert ignoriert, wird die letzte Eingabe in der Gruppe überprüft.

msanford
quelle
2

Die andere Möglichkeit, die Standardeinstellung für Optionsfelder festzulegen, insbesondere wenn Sie anglejs verwenden, besteht darin, das Flag 'ng-check' auf "true" zu setzen, z. B.: <input id="d_man" value="M" ng-disabled="some Value" type="radio" ng-checked="true">Man

das checked = "geprüft" hat bei mir nicht funktioniert ..

Deepika Pethaperumal
quelle
Ursache ng-checked="true"ist aus dem Winkelrepertoire.
Augustas
Oder setzen Sie den Modellwert in der Steuerung auf "true". Achten Sie darauf, dass Sie einen String festlegen, keinen Booleschen!
Thomas David Kehoe
2

Beachten Sie, dass wenn Sie zwei Optionsfelder mit demselben Attribut "Name" und dem Attribut "Erforderlich" haben, das Hinzufügen des Attributs "Aktiviert" diese nicht aktiviert.

Beispiel: Dadurch bleiben beide Optionsfelder deaktiviert.

<input type="radio" name="gender" value="male" required <?php echo "checked"; ?>/>
<input type="radio" name="gender" value="female" required />

Dadurch wird das Optionsfeld "männlich" aktiviert.

<input type="radio" name="gender" value="male" <?php echo "checked"; ?>/>
<input type="radio" name="gender" value="female" />
YZ Zhe
quelle
1

Ich bin ein bisschen spät zur Party und ich weiß, dass das OP HTML sagte, aber wenn Sie dies in MVC tun mussten, können Sie einstellen true den dritten Parameter festlegen.

z.B:

    <p>Option One :@Html.RadioButton("options", "option1", true})</p>
    // true will set it checked

     <p>Option Two :@Html.RadioButton("options", "option2"})</p>
     //nothing will leave it unchecked
user2903379
quelle
0

Wenn Sie React-Redux für Ihre Anwendung verwenden und Daten anzeigen möchten, die sich im Redux-Speicher befinden, können Sie die Option "Aktiviert" wie folgt festlegen.

<label>Male</label>

 <input
   type="radio"
   name="gender"
   defaultChecked={this.props.gender == "0"}
 />



 <label>Female</label>
 <input
   type="radio"
   name="gender"
   defaultChecked={this.props.gender == "1"}
 />
Ruks
quelle