html - Comment puis-je désactiver la case à cocher en cliquant sur l'étiquette de texte?

Translate

CheckboxesdansHTMLles formulaires n'ont pas impliciteÉtiquettesavec eux. L'ajout d'une étiquette explicite (du texte) à côté ne fait pas basculer lecheckbox.

Comment puis-je faire basculer une case à cocher en cliquant également sur l'étiquette de texte?

This question and all comments follow the "Attribution Required."

Toutes les réponses

Mat
Translate

Définissez le CSSdisplayproprié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 permettant 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>
La source
Translate

Si vous balisez correctement votre code HTML, il n'est pas nécessaire d'utiliser 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" />

lepourl'attribut sur l'élément d'étiquette est lié auidattribut sur l'élément d'entrée et le navigateur s'occupe du reste.

Cela a été testé pour fonctionner dans:

  • IE6
  • IE7
  • Firefox
La source
Translate

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>: l'accessibilité. Les outils que les personnes malvoyantes utilisent pour accéder au Web ont besoin des <label> s 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 d'être confronté à une forme qui lit"Veuillez sélectionner votre méthode d'expédition, radio-button1, radio-button2, radio-button3".

Notez que l'accessibilité Web est un sujet complexe; Les <label> sont une étape nécessaire mais ils ne sont pas suffisants pour garantir l'accessibilité ou la conformité aux réglementations gouvernementales là où elles s'appliquent.

La source
Translate

Ronnie,

Si vous souhaitez inclure 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>
La source
Translate

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>
La source
Translate

Vous devez simplement envelopper la case à cocher 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 lepourattribut d'étiquette etidde votre case à cocher comme ci-dessous

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

VIOLON

La source
Translate

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, merci de me corriger!

La source
Translate

L'emballage avec l'étiquette ne permet toujours pas de cliquer sur «n'importe où dans la boîte» - toujours juste 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 efficacement deux fois.

La source