Alterne o botão de rádio HTML clicando em seu rótulo

87

Existe uma maneira simples de alternar um botão de rádio - quando um texto próximo a ele é clicado - sem introduzir qualquer grande estrutura Javascript em meu pequeno projeto PHP?

O formulário da web tem a seguinte aparência:

<html>
<body>
<form method="post">
<p>Mode:<br /> 
<input type="radio" name="mode" value="create"><i>create table</i><br />
<input type="radio" name="mode" value="select" checked>select records (can specify id)<br />
<input type="radio" name="mode" value="insert">insert 1 record (must specify all)<br />
<input type="radio" name="mode" value="delete">delete records (must specify id)<br />
<input type="radio" name="mode" value="drop"><i>drop table</i><br />
</p>
<p>Id: <input type="text" name="id" size=32 maxlength=32 /> (32 hex chars)</p>

<p>Latitude: <input type="text" name="lat" size=10 /> (between -90 and 90)</p>
<p>Longitude: <input type="text" name="lng" size=10 /> (between -90 and 90)</p>
<p>Speed: <input type="text" name="spd" size=10 /> (not negative)</p>
<p><input type="submit" value="OK" /></p>
</form>
</body>
</html>
javascript html radio-button Alexander Farber
fonte

Respostas:

164

Você também pode agrupar seus elementos sem dar a cada um deles um ID, já que a <label>é implicitamente para a entrada que contém, como este:

<label>
   <input type="radio" name="mode" value="create">
   <i>create table</i>
</label>
Nick Craver
fonte
4
Isso torna o estilo do rótulo mais difícil e requer que você agrupe seu texto em ainda mais elementos.
Soviut
2
Sim, mas se você não estiver estilizando, será mais fácil obter a funcionalidade desejada. Não gosto de ter que adicionar atributos extras de ID e "para".
Dr. C. Hilarius de
4
IDs +1 podem ser muito malignos, então é melhor evitá-los como regra geral
Chris Stephens
a embalagem é uma solução superior ao uso ide forsem embalagem. O motivo é que, se o rótulo tiver uma margem ampla e o usuário clicar no ponto ideal entre a caixa de seleção e o rótulo (como é mais provável que aconteça), nada acontece. Fiddle aqui: jsfiddle.net/v157ctja/5
Marcus Junius Brutus
71

Você pode usar <label>elementos projetados para fazer exatamente isso:

<input type="radio" id="radCreateMode" name="mode" value="create" />
<label for="radCreateMode"><i>create table</i></label>
Frédéric Hamidi
fonte
1
@Alexander, com certeza. Apenas o Safari versão 2 e inferior não oferece suporte.
Frédéric Hamidi
3
E depois disso, você pode usar o seletor input#radCreateMode:checked ~ labelpara aplicar estilos ao rótulo. Aplicar estilos a rótulos na seleção não é possível se aninharmos a entrada dentro do rótulo.
Zuhaib Ali
1
Essa realmente deveria ser a resposta aceita, é a maneira correta de fazer isso.
greco.roamin
1
Estou usando o Safari v 13 e esse método não funcionou para mim. O botão de opção pode ser desmarcado, mas não selecionado. Tive que envolver o rótulo em torno da entrada: <label> <input> texto do meu rótulo </label>. Observe que não estou usando um <form>, nem um <fieldset>.
IAM_AL_X
Certifique-se de que o valor do atributo for é o id correto para a entrada. Para o caso de alguém cometer o mesmo erro que eu.
Kevin .NET
5

Envolver a entrada sob o rótulo deve funcionar.

<label>
    <input type="radio" name="mode" value="create"><i>create table</i>
</label>
Jason Ching
fonte
1

Tive problemas para encontrar o valor do botão de opção usando este método, uma alternativa é usar uma área de acerto aumentando a área clicável de um botão .

Christopher Grigg
fonte