Basculer le bouton radio HTML en cliquant sur son étiquette

Existe-t-il un moyen simple de faire un bouton radio basculer - quand un texte près de lui est cliqué - sans introduire un grand Javascript Framework dans mon projet PHP smal?Basculer le bouton radio HTML en cliquant sur son étiquette

Le formulaire web ressemble à ceci: éléments

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

Source

2010-11-18 Alexander Farber

130

Vous pouvez également envelopper vos éléments sans leur donner chacun un ID, car <label> est implicitement pour l'entrée qu'il contient, comme ceci:

<label> 
    <input type="radio" name="mode" value="create"> 
    <i>create table</i> 
</label>

Source

2010-11-18 09:23:59

Cela rend le style de l'étiquette plus difficile et vous oblige à envelopper votre texte dans encore plus d'éléments. – Soviut

Oui, mais si vous ne stylisez pas, il est plus facile d'obtenir la fonctionnalité que vous souhaitez. Je n'aime pas avoir à ajouter des ID supplémentaires et des attributs «pour». –

+1 Les ID peuvent être très mauvais, il est donc préférable de les éviter en règle générale. –

Vous pouvez utiliser <label>, qui sont conçus pour faire exactement cela:

<input type="radio" id="radCreateMode" name="mode" value="create" /> 
<label for="radCreateMode"><i>create table</i></label>

Source

2010-11-18 09:16:16

Merci, cela fonctionne-t-il dans tous les navigateurs modernes? –

@Alexander, absolument. Seul Safari version 2 et inférieure ne le supporte pas. –

Ensuite, vous pouvez utiliser le sélecteur 'input # radCreateMode: checked ~ label' pour appliquer des styles à l'étiquette. L'application de styles aux étiquettes lors de la sélection n'est pas possible si nous imbriquons l'entrée dans l'étiquette. –

Envelopper l'entrée sous l'étiquette devrait fonctionner.

<label> 
    <input type="radio" name="mode" value="create"><i>create table</i> 
</label>

Source

2015-11-29 03:14:37

Cette réponse ne dépend pas de la propriété id - une bonne chose! – user1068352

J'ai eu du mal à trouver la valeur du bouton radio en utilisant cette méthode, une alternative est d'utiliser une zone touchée increasing clickable area of a button.

Source

2016-12-06 02:15:02

Basculer le bouton radio HTML en cliquant sur son étiquette

Répondre

Questions connexes