HTML - le bouton radio personnalisé ne bascule pas si l'on clique sur le texte

Question

J'ai construit un radio button en utilisant cette structure. Cependant, avec cette configuration, je ne peux pas cliquer sur le texte pour faire basculer la radio. Avez-vous une idée de la raison pour laquelle cela ne fonctionne pas ?

                <div class="form-group">
                    <label class="custom-control custom-radio">
                        <input id="pefrormanceRadio" name="bonusRangeRadio" type="radio" class="custom-control-input" value="pefrormanceRadio">
                        <span class="custom-control-indicator"></span>
                    </label>
                    <span class="custom-control-description">test</span>
                </div>

Answer 1

Vous pouvez y parvenir en déplaçant votre texte à l'intérieur de l'élément d'étiquette.

En cliquant sur une étiquette, on clique également sur l'entrée de formulaire qui lui est associée. Vous pouvez soit associer une étiquette et une entrée de formulaire avec l'attribut HTML "for" (comme dans la réponse de zmuci), soit envelopper votre entrée dans l'élément étiquette (ce que vous faites déjà).

Dans votre cas, vous avez essayé de cliquer sur un texte qui se trouvait en dehors de l'étiquette (et qui n'était donc pas associé à l'entrée).

<div class="form-group">
    <label class="custom-control custom-radio">
        <input id="pefrormanceRadio" name="bonusRangeRadio" type="radio" class="custom-control-input" value="pefrormanceRadio">
        <span class="custom-control-indicator"></span>
        <span class="custom-control-description">test</span>
    </label>
</div>

Answer 2

Vous devez "connecter" le texte et l'entrée, vous le faites avec for ajouté à l'attribut label étiquette.

Votre HTML devrait donc ressembler à quelque chose comme ceci :

<div class="form-group">
  <input id="pefrormanceRadio" name="bonusRangeRadio" type="radio" class="custom-control-input" value="pefrormanceRadio">
  <label class="custom-control custom-radio" for="pefrormanceRadio">Test</label>
  <span class="custom-control-indicator"></span>
</div>

Ou si vous ne pouvez pas changer le HTML, la réponse de Den Biswajit est la bonne. Mais vous devez savoir que du point de vue sémantique/accessible, l'entrée doit avoir un label significatif.

Answer 3

Vous pouvez le faire en utilisant jquery

$("label").click(function(){
$("#pefrormanceRadio").attr('checked', 'checked'); 
});

Answer 4

Veuillez ajouter custom-control-description à l'intérieur de l'étiquette et mise à jour de la css

<div class="form-group">
  <label class="custom-control custom-radio">
    <input id="pefrormanceRadio" name="bonusRangeRadio" type="radio" class="custom-control-input" value="pefrormanceRadio">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">test</span>
  </label>
</div>