Присвойте начальное значение переключателю, как отмечено


Ответы:


164

Вы можете использовать checkedатрибут для этого:

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

11
Вы также можете просто упомянуть этот атрибут без назначенного значения, т.е. <input type = "radio" проверено>
niksvp

1
@niksvp Я полагаю, что check = "флажок" - это правильный способ предварительно проверить переключатель - просто использование "флажка" не является допустимым HTML (несмотря на то, что поддерживается большинством браузеров)
Мэтт Хили

9
@matthewh - нет, вы можете использовать только «проверил» сам по себе, и это действительный HTML (хотя и не действительный XHTML). Лично я предпочитаю 'флажок = "проверен", но вам не нужно его использовать ... действительно, есть довольно веские доводы против его использования.
Алджи Тейлор

55

Вы можете просто использовать:

<input type="radio" checked />

Использование только проверенного атрибута без указания значения аналогично checked="checked".


как сказал @Matt Healey, использование проверенного без атрибута недопустимо HTML
salvob

16
@salvob неверно. это недопустимый X- HTML, однако он полностью действителен для HTML5, который является настолько же глобальным стандартом, что и когда-либо.
Крис Марисик

14

Я поставил этот ответ на похожий вопрос, который был отмечен как дубликат этого вопроса. Ответ помог приличному количеству людей, поэтому я решил добавить его и на всякий случай.

Это не совсем ответ на вопрос, но для тех, кто использует AngularJS, пытаясь достичь этого, ответ немного отличается. И на самом деле нормальный ответ не сработает (по крайней мере, для меня).

Ваш HTML будет выглядеть очень похоже на обычную кнопку-переключатель:

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

В вашем контроллере вы объявили, mValueчто связано с переключателями. Чтобы предварительно выбрать один из этих переключателей, присвойте $scopeпеременной, связанной с группой, значение требуемого входа:

$scope.mValue="second"

Это делает «второй» переключатель выбранным при загрузке страницы.


На самом деле! Приведенные выше ответы не работают с Angular JS. Ваш ответ решил мою проблему. Спасибо! :)
Митакш Гупта

3

Для тех, кто ищет решение для Angular2 (2.4.8), так как этот вопрос обычно используется при поиске:

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

Это добавит checkedатрибут к входу с учетом условия, но ничего не добавит, если условие не выполнится.

Не делай этого:

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

потому что это добавит атрибут checked="false"ко всем другим элементам ввода.

Поскольку браузер только ищет наличие checkedатрибута ( ключа ), игнорируя его значение, поэтому будет проверяться последний вход в группу.


2

Другой способ установить флажок по умолчанию для переключателей, особенно если вы используете angularjs, это установить флаг 'ng-checked' в 'true', например: <input id="d_man" value="M" ng-disabled="some Value" type="radio" ng-checked="true">Man

проверено = "проверено" не работает для меня ..


причина ng-checked="true"в ангулярном репертуаре.
Август

Или установите значение модели в контроллере на «true». Следите за тем, чтобы вы указали строку, а не логическое значение!
Томас Дэвид Кехо

2

Обратите внимание, что если у вас есть две переключателя с одинаковым атрибутом «name» и они имеют атрибут «required», то добавление к ним атрибута «checked» не сделает их проверенными.

Пример: это делает оба переключателя неактивными.

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

Это заставит переключатель «мужской» проверяться.

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

1

Я немного опоздал на вечеринку, и я знаю, что ОП сказал html, но если вам нужно было сделать это в MVC, вы можете установить trueтретий параметр.

например:

    <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

0

Если для вашего приложения вы используете response-redux и если вы хотите показать данные, которые находятся в хранилище redux, вы можете установить опцию «флажок», как показано ниже.

<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"}
 />
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.