Como selecionar um botão de opção por padrão?
Por padrão ' verificado ” é utilizado para selecionar o botão de rádio. Se esse atributo for usado em vários botões de opção, o botão de opção mais recente será selecionado por padrão. Siga o blog passo a passo para selecionar o botão de opção por padrão:
Etapa 1: criar botões de opção
No arquivo HTML, crie três botões de opção e anexe rótulos a eles:
< Centro >
< h3 > Selecione seu nível de experiência: < / h3 >
< div >
< entrada tipo = 'rádio' eu ia = 'principiante' nome = 'experiência' valor = 'principiante' >
< rótulo para = 'principiante' > Principiante < / rótulo >
< / div >
< div >
< entrada tipo = 'rádio' eu ia = 'intermediário' nome = 'experiência' valor = 'intermediário' >
< rótulo para = 'intermediário' > Intermediário < / rótulo >
< / div >
< div >
< entrada tipo = 'rádio' eu ia = 'avançar' nome = 'experiência' valor = 'avançar' >
< rótulo para = 'avançar' > Avançar < / rótulo >
< / div >
< / Centro >
No trecho de código acima:
- O botão de opção é formado pela criação de “
” e definindo seu tipo como “ rádio ”. - Atribua a cada botão de rádio o “nome”, “id” e “valor”.
- No final, use o “ eu ia ” do campo de entrada para anexar o “
” usando a tag “ para ” atributo.
Após executar o script a saída conforme abaixo:
A figura representa que os botões de opção são exibidos, mas nenhum deles é selecionado por padrão.
Etapa 2: selecione por padrão
O ' verificado ” é utilizado para selecionar automaticamente o botão de opção. Ele seleciona apenas uma opção. É por isso que é uma abordagem melhor selecionar um botão de opção por padrão. Ele restringe o usuário a selecionar a opção correta:
< div >
< entrada tipo = 'rádio' eu ia = 'principiante' nome = 'experiência' valor = 'principiante' verificado>
< rótulo para = 'principiante' >Iniciante< / rótulo >
< / div >
No código acima, o verificado atributo é usado e é atribuído apenas ao primeiro campo de entrada.
Agora, depois de executar o código acima, a página da Web fica assim:
A saída ilustra que o primeiro botão de opção é selecionado por padrão em cada atualização da página.
Dica de bônus: usando JavaScript para selecionar o botão de opção por padrão
Para selecionar um botão de opção por padrão usando JavaScript, acesse o botão de opção usando id. Em seguida, selecione seu atributo marcado e defina seu valor booleano definido como “true” como no código abaixo:
< roteiro >document.getElementById ( 'principiante' ) . verificado = verdadeiro;
< / roteiro >
Neste código, o “ principiante ” é o id desse botão de opção que é selecionado por padrão.
Depois de compilar o script, a saída é a seguinte:
No instantâneo acima, o primeiro botão de opção é selecionado por padrão usando JavaScript.
Conclusão
Para selecionar um botão de opção, os usuários podem utilizar o botão “ verificado ” atributo. Se o atributo marcado for usado em mais de um botão de opção, o botão de opção obtém o valor de atributo 'marcado' mais recente. Para selecionar um botão de opção por padrão usando JavaScript, acesse o botão de opção usando id. Este blog demonstrou com sucesso como selecionar o botão de opção por padrão.