Przypisz wartość początkową do przycisku opcji jako zaznaczonego

Jak początkowo przypisać wartość przycisku opcji zaznaczoną w HTML?

Możesz użyć tego checkedatrybutu:

<input type="radio" checked="checked">

Możesz po prostu użyć:

<input type="radio" checked />

Używanie tylko sprawdzonego atrybutu bez podawania wartości jest tym samym, co checked="checked".

Podałem tę odpowiedź na podobne pytanie, które zostało oznaczone jako duplikat tego pytania. Odpowiedź pomogła przyzwoitej liczbie ludzi, więc pomyślałem, że dodam ją tutaj na wszelki wypadek.

To nie jest dokładną odpowiedzią na pytanie, ale dla każdego, kto próbuje to osiągnąć, używając AngularJS, odpowiedź jest nieco inna. I faktycznie normalna odpowiedź nie zadziała (przynajmniej nie zadziałała dla mnie).

Twój kod HTML będzie wyglądał podobnie do zwykłego przycisku opcji:

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

W swoim kontrolerze zadeklarowałeś, mValueże jest powiązany z przyciskami radiowymi. Aby jeden z tych przycisków radiowych był wstępnie wybrany, przypisz $scopezmienną związaną z grupą do żądanej wartości wejścia:

$scope.mValue="second"

To sprawia, że ​​"drugi" przycisk opcji jest wybierany podczas ładowania strony.

Dla każdego, kto szuka rozwiązania Angular2 (2.4.8), ponieważ jest to ogólnie popularne pytanie podczas wyszukiwania:

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

Spowoduje to dodanie checked atrybutu do wejścia podanego warunku, ale nic nie doda, jeśli warunek się nie powiedzie.

Nie rób tego:

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

ponieważ spowoduje to dodanie atrybutu checked="false"do każdego innego elementu wejściowego.

Ponieważ przeglądarka szuka tylko checkedatrybutu ( klucza ), ignorując jego wartość, więc ostatnie wejście w grupie zostanie sprawdzone.

Innym sposobem ustawienia domyślnego zaznaczenia na przyciskach radiowych, szczególnie jeśli używasz angularjs, jest ustawienie flagi „ng-check” na „true”, np .: <input id="d_man" value="M" ng-disabled="some Value" type="radio" ng-checked="true"> Man

zaznaczone = "zaznaczone" nie działa dla mnie ..

Zwróć uwagę, że jeśli masz dwa przyciski opcji z tym samym atrybutem „nazwa” i mają one atrybut „wymagany”, dodanie do nich atrybutu „zaznaczone” nie spowoduje ich zaznaczenia.

Przykład: powoduje to, że oba przyciski opcji pozostają niezaznaczone.

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

Spowoduje to zaznaczenie przycisku opcji „męski”.

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

Trochę spóźniłem się na imprezę i wiem, że OP powiedział html, ale jeśli trzeba to zrobić w MVC możesz ustawić true trzeci parametr.

na przykład:

    <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

Jeśli używasz react-redux w swojej aplikacji i chcesz pokazać dane, które są w sklepie redux, możesz ustawić opcję "zaznaczone" jak poniżej.

<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"}
 />