Cliquer sur le texte pour sélectionner le bouton radio correspondant

Je crée une application web de quiz en PHP. Chaque question est composée d'un <label> distinct et a 4 choix possibles, en utilisant radio buttons pour permettre à l'utilisateur de sélectionner sa réponse. Le code HTML actuel pour une seule question ressemble à:Cliquer sur le texte pour sélectionner le bouton radio correspondant

<label for="349">What is my middle name?</label> 
<br> 
<input id="349" type="radio" value="1" name="349">Abe 
<br> 
<input id="349" type="radio" value="2" name="349">Andrew 
<br> 
<input id="349" type="radio" value="3" name="349">Andre 
<br> 
<input id="349" type="radio" value="4" name="349">Anderson 
<br>

Je voudrais à l'utilisateur de la possibilité de cliquer sur le texte associé à bouton radio. À l'heure actuelle, l'utilisateur peut seulement cliquer sur le bouton radio lui-même - ce que je trouve être une tâche assez lourde. J'ai lu Unable to select a particular radio button choice by clicking on the choice text et les points de suggestion pour rendre les attributs for et id correspondent aux attributs. J'ai fait cela et ça ne marche toujours pas.

Ma question est: Je voudrais être capable de cliquer sur le texte d'un objet <input type="radio">, plutôt que de pouvoir sélectionner le bouton radio lui-même. Je sais que j'ai déjà lu à ce sujet, mais je n'arrive pas à trouver de solution à mon problème. Toute aide ou suggestion sont très appréciées!

Source

2011-10-22 Abundnce10

136

Dans votre code, vous avez une étiquette sur le formulaire lui-même. Vous voulez mettre des étiquettes sur chaque groupe radio individuel, comme indiqué ci-dessous.

<form> 
 
    <p>What is my middle name?</p> 
 
    <br> 
 
    <input id="349" type="radio" value="1" name="question1"> 
 
    <label for="349">Abe</label> 
 
    <br> 
 
    <input id="350" type="radio" value="2" name="question1"> 
 
    <label for="350">Andrew</label> 
 
    <br> 
 
    <input id="351" type="radio" value="3" name="question1"> 
 
    <label for="351">Andre</label> 
 
    <br> 
 
    <input id="352" type="radio" value="4" name="question1"> 
 
    <label for="352">Anderson</label> 
 
    <br> 
 
</form>

Vous devez garder à l'esprit que deux éléments ne devraient jamais avoir le même ID. L'attribut name est utilisé pour que les boutons radio fonctionnent en tant que groupe et n'autorisent qu'une seule sélection à la fois.

Source

2011-10-22 23:23:20 Nathan

Excellemment simple. J'adore quand une fonctionnalité presque cachée des tags est redécouverte – foochow

L'étiquette d'étiquette doit entourer chaque réponse, par ex. autour d'Abe, Andrew, etc ... et il doit être unique pour chacun d'entre eux.

Source

2011-10-22 23:24:04 endyourif

Il semble y avoir un petit espace non cliquable entre le bouton radio et l'étiquette si cela est fait selon la réponse de Nathan. Voici comment les faire rejoindre en toute transparence (voir this article):

<form> 
    <p>What is my middle name?</p> 
    <br> 
    <label><input id="349" type="radio" value="1" name="question1">Abe</label> 
    <br> 
    <label><input id="350" type="radio" value="2" name="question1">Andrew</label> 
    <br> 
    <label><input id="351" type="radio" value="3" name="question1">Andre</label> 
    <br> 
    <label><input id="352" type="radio" value="4" name="question1">Anderson</label> 
    <br> 
</form>

Source

2015-12-14 12:27:51 user21820

Je préfère cette réponse. Mais êtes-vous sûr que vous avez même besoin des attributs «pour» avec cette approche? – Piddu

@Piddu: Je pense que vous avez raison, alors j'ai mis à jour ma réponse. Merci! – user21820

Vous pouvez le faire comme ça

<label for="1">hi</label> 
<input type="radio" id="1" />

Donc, si vous cliquez sur le texte ou l'étiquette il sélectionne le bouton radio. Mais si vous faites cela ...

<label for="1">//</label>

et vous ajoutez cela à ce que le code que j'ai écrit juste avant cela, alors si vous cliquez sur le 2ème étiquette il choisira également la radio.

Source

2016-10-10 01:19:08

L'imbrication de l'étiquette d'entrée dans l'étiquette assure que l'étiquette apparaît juste à côté du bouton radio. Avec les approches précédentes suggérées, vous pouvez placer la balise label n'importe où dans le fichier html et sélectionner le bouton radio associé lorsque vous cliquez dessus.Check this out:

<html> 
 
<body> 
 

 
<form> 
 
    <p>What is my middle name?</p> 
 
    <br> 
 
    <input id="349" type="radio" value="1" name="question1"> 
 

 
    <br> 
 
    <input id="350" type="radio" value="2" name="question1"> 
 
    <label for="350">Andrew</label> 
 
    <br> 
 
    <input id="351" type="radio" value="3" name="question1"> 
 

 
    <br> 
 
    <input id="352" type="radio" value="4" name="question1"> 
 
    <label for="352">Anderson</label> 
 
    <br> 
 
</form><br/> 
 
<p>This is a paragraph</p> 
 
    <label for="349">Abe</label><br/> 
 
    <label for="351">Andre</label> 
 
    
 
</body> 
 
</html>

En procédant ainsi, élimine cette faille à la place:

<form> 
 
    <p>What is my middle name?</p> 
 
    <br> 
 
    
 
    <label> 
 
    <input id="349" type="radio" value="1" name="question1"/>Abe 
 
    </label> 
 
    <br> 
 
    
 
    <label> 
 
    <input id="350" type="radio" value="2" name="question1"/>Andrew 
 
    </label> 
 
    <br> 
 
    
 
    <label> 
 
    <input id="351" type="radio" value="3" name="question1"/>Andre 
 
    </label> 
 
    <br> 
 
    
 
    <label> 
 
    <input id="352" type="radio" value="4" name="question1"/>Anderson 
 
    </label> 
 
    <br> 
 
</form>

Source

2017-10-14 13:52:38 Neo

Cliquer sur le texte pour sélectionner le bouton radio correspondant

Répondre

Questions connexes