Atribua um valor inicial ao botão de opção como marcado

138

Como atribuir o valor de um botão de opção inicialmente como verificado no HTML?

Rinkal Bhanderi
fonte

Respostas:

164

Você pode usar o checkedatributo para isso:

<input type="radio" checked="checked">
polarblau
fonte
11
você também pode mencionar esse atributo sem nenhum valor atribuído, isto é, <input type = "radio"
selected
1
@niksvp Acredito checked = "checked" é o caminho válido para pré-verificar um botão de rádio - apenas usando "marcada" não é HTML válido (apesar de ser apoiada pela maioria dos navegadores)
Matt Healy
9
@matthewh - nah, você pode usar apenas "marcado" por si só e é HTML válido (embora não seja XHTML válido). Pessoalmente, prefiro 'Checker = "Checker"', mas você não precisa usá-lo ... Na verdade, há um argumento bastante forte contra usá-lo.
Algy Taylor
55

Você pode apenas usar:

<input type="radio" checked />

Usar apenas o atributo verificado sem indicar um valor é o mesmo que checked="checked".

semente
fonte
como @ Matt Healey afirmou, utilizando-se verificado sem o atributo não é válido HTML
salvob
16
@salvob incorreto. não é um X html válido , no entanto, é completamente válido para HTML5, que é o mais global de um padrão possível.
Chris Marisic
14

Eu coloquei esta resposta em uma pergunta semelhante que foi marcada como uma duplicata desta pergunta. A resposta ajudou uma quantidade razoável de pessoas, então pensei em adicioná-la aqui também por precaução.

Isso não responde exatamente à pergunta, mas para quem usa o AngularJS tentando fazer isso, a resposta é um pouco diferente. E, na verdade, a resposta normal não funcionará (pelo menos não funcionou para mim).

Seu html será bem parecido com o botão de opção normal:

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

No seu controlador, você terá declarado o mValueque está associado aos botões de opção. Para ter um desses botões de opção pré-selecionados, atribua a $scopevariável associada ao grupo ao valor da entrada desejada:

$scope.mValue="second"

Isso faz com que o "segundo" botão de opção seja selecionado ao carregar a página.

discodane
fonte
De fato! As respostas acima não funcionam com o Angular JS. Sua resposta resolveu meu problema. Obrigado! :)
Mitaksh Gupta
3

Para quem procura uma solução Angular2 (2.4.8), pois essa é uma pergunta genericamente popular ao pesquisar:

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

Isso adicionará o checkedatributo à entrada dada a condição, mas não adicionará nada se a condição falhar.

Não faça isso:

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

porque isso adicionará o atributo checked="false"a todos os outros elementos de entrada.

Como o navegador procura apenas a presença do checkedatributo (a chave ), ignorando seu valor, a última entrada no grupo será verificada.

msanford
fonte
2

A outra maneira de definir os botões de opção padrão marcados nos botões de opção, especialmente se você estiver usando o angularjs, é definir o sinalizador 'ng-selected' como "true", por exemplo: <input id="d_man" value="M" ng-disabled="some Value" type="radio" ng-checked="true"> Man

o verificado = "verificado" não funcionou para mim ..

Deepika Pethaperumal
fonte
causa ng-checked="true"é do repertório angularjs.
Augustas
Ou defina o valor do modelo no controlador como "true". Cuidado, você o define como uma string, não um booleano!
Thomas David Kehoe
2

Observe que, se você tiver dois botões de opção com o mesmo atributo "nome" e eles tiverem o atributo "obrigatório", a adição do atributo "marcado" a eles não fará com que sejam verificados.

Exemplo: Isso faz com que os dois botões de opção permaneçam desmarcados.

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

Isso fará com que o botão de opção "masculino" seja marcado.

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

Estou um pouco atrasado para a festa e sei que o OP disse html, mas se você precisar fazer isso no MVC, poderá definir true o terceiro parâmetro.

por exemplo:

    <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
fonte
0

Se você estiver usando o react-redux para seu aplicativo e se desejar mostrar dados que estão no repositório redux, você pode definir a opção "marcada" como abaixo.

<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
fonte