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

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