Comment puis-je faire en sorte qu'une case à cocher empêche également de cliquer sur l'étiquette de texte ?

StackOverflow https://stackoverflow.com/questions/2123

  •  08-06-2019
  •  | 
  •  

Question

Checkboxes dans HTML les formulaires n'ont pas d'implicite Étiquettes avec eux.L'ajout d'une étiquette explicite (du texte) à côté ne fait pas basculer le checkbox.

Comment puis-je faire en sorte qu'une case à cocher empêche également de cliquer sur l'étiquette de texte ?

Était-ce utile?

La solution

Définir le CSS display propriété pour que l'étiquette soit un élément de bloc et utilisez-la à la place de votre div - elle conserve la signification sémantique d'une étiquette tout en autorisant le style que vous souhaitez.

Par exemple:

label {
  width: 100px;
  height: 100px;
  display: block;
  background-color: #e0e0ff;
}
<label for="test">
  A ticky box! <input type="checkbox" id="test" />
</label>

Autres conseils

Si vous balisez correctement votre code HTML, vous n’avez pas besoin de javascript.Le code suivant permettra à l'utilisateur de cliquer sur le texte de l'étiquette pour cocher la case.

<label for="surname">Surname</label>
<input type="checkbox" name="surname" id="surname" />

Le pour l'attribut sur l'élément d'étiquette est lié au identifiant attribut sur l’élément d’entrée et le navigateur fait le reste.

Cela a été testé pour fonctionner dans :

  • IE6
  • IE7
  • Firefox

Comme indiqué par @Gatekiller et d'autres, la bonne solution est la balise <label>.

Cliquer dans le texte est bien, mais il y a une autre raison d'utiliser la balise <label> :accessibilité.Les outils que les personnes malvoyantes utilisent pour accéder au Web ont besoin des <label> pour lire la signification des cases à cocher et des boutons radio.Sans <label>, ils doivent deviner en fonction du texte environnant, et ils se trompent souvent ou doivent abandonner.

Il est très frustrant de se retrouver face à un formulaire qui dit "Veuillez sélectionner votre méthode d'expédition, bouton radio1, bouton radio2, bouton radio3".

Notez que l'accessibilité du Web est un sujet complexe ;Les <label> sont une étape nécessaire mais ils ne suffisent pas à garantir l'accessibilité ou le respect des réglementations gouvernementales là où elles s'appliquent.

Ronnie,

Si vous souhaitez placer le texte de l'étiquette et la case à cocher dans un élément wrapper, vous pouvez procéder comme suit :

<label for="surname">
    Surname
    <input type="checkbox" name="surname" id="surname" />
</label>

Vous pouvez envelopper votre case à cocher dans l'étiquette :

<label style="display: block; padding: 50px 0 0 50px; background-color: pink; width: 80px; height: 80px">
  <input type="checkbox" name="surname">
</label>

Vous devez simplement cocher la case dans la balise d'étiquette, comme ceci

 <label style="height: 10px; width: 150px; display: block; ">
  [Checkbox Label Here] <input type="checkbox"/>
 </label>

VIOLON

ou vous pouvez également utiliser le pour attribut de l'étiquette et identifiant de votre case à cocher comme ci-dessous

<label for="other">Other Details</label>
<input type="checkbox" id="other" />

VIOLON

cela devrait fonctionner :

<script>
function checkbox () {
    var check = document.getElementById("myCheck").checked;
    var box = document.getElementById("myCheck")

    if (check == true) {
        box.checked = false;
    }
    else if (check == false) {
        box.checked = true;
    }
}
</script>
<input type="checkbox"><p id="myCheck" onClick="checkbox();">checkbox</p>

si ce n'est pas le cas, corrigez-moi !

L'habillage avec l'étiquette ne permet toujours pas de cliquer "n'importe où dans la boîte" - toujours uniquement sur le texte !Cela fait le travail pour moi:

<div onclick="dob.checked=!dob.checked" class="checkbox"><input onclick="checked=!checked" id="dob" type="checkbox"/>Date of birth entry must be completed</div>

mais malheureusement, il y a beaucoup de javascript qui bascule effectivement deux fois.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top