Comment puis-je faire en sorte qu'une case à cocher empêche également de cliquer sur l'étiquette de texte ?
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 ?
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>
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" />
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.