Comment puis-je faire une bascule de case à cocher de cliquer sur l'étiquette du texte aussi bien?

voix
29

Checkboxesdans les HTMLformes n'ont pas implicites des étiquettes avec eux. Ajout d' une étiquette explicite (certains texte) à côté ne bascule pas checkbox.

Comment puis-je faire une bascule de case à cocher de cliquer sur l'étiquette du texte aussi bien?

Créé 05/08/2008 à 12:51
source utilisateur
Dans d'autres langues...                            


8 réponses

voix
43

Si vous Markup correctement votre code HTML, il n'y a pas besoin de javascript. Le code suivant permet à l'utilisateur de cliquer sur le texte de l'étiquette de cocher la case à cocher.

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

Le pour attribut sur les liens d'éléments d'étiquette à l' id attribut sur l'élément d'entrée et le navigateur se charge du reste.

Cela a été testé pour fonctionner dans:

  • IE6
  • IE7
  • Firefox
Créé 05/08/2008 à 13:00
source utilisateur

voix
17

Définissez la CSS displaypropriété pour l'étiquette d'être un élément de bloc et utiliser à la place de votre div - il conserve la signification sémantique d'une étiquette tout en permettant tout le style que vous aimez.

Par exemple:

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

Créé 05/08/2008 à 13:52
source utilisateur

voix
3

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

Cliquez-in-the-texte est agréable, mais il y a une autre raison d'utiliser la balise <label>: l'accessibilité. Les outils que les personnes ayant une déficience visuelle utilisent pour accéder au Web ont besoin de <label> est en lecture sur la signification des cases à cocher et des boutons radio. Sans <label> s, ils doivent deviner en fonction du texte environnant, et ils se trompent ou ont souvent abandonner.

Il est très frustrant d'être confronté à une forme qui lit « S'il vous plaît choisir votre mode de livraison, radio-button1, radio-Bouton2, radio-button3 ».

Notez que l'accessibilité du Web est un sujet complexe; <label> sont une étape nécessaire mais ils ne suffisent pas à garantir l'accessibilité ou la conformité à la réglementation gouvernementale où il applique.

Créé 25/08/2008 à 16:21
source utilisateur

voix
2

Ronnie,

Si vous voulez joindre le texte de l'étiquette et la case dans un élément d'emballage, vous pouvez effectuer les opérations suivantes:

<label for="surname">
    Surname
    <input type="checkbox" name="surname" id="surname" />
</label>
Créé 05/08/2008 à 13:28
source utilisateur

voix
1

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>
Créé 05/08/2008 à 13:25
source utilisateur

voix
0

Vous devez simplement envelopper la case à cocher dans la balise d'étiquette comme ça

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

VIOLON

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

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

VIOLON

Créé 01/09/2015 à 12:10
source utilisateur

voix
-1

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 elle ne marche pas, veuiller me corect!

Créé 09/03/2015 à 12:13
source utilisateur

voix
-2

Emballage avec l'étiquette ne permet toujours pas cliquer sur « importe où dans la zone » - encore juste 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 a malheureusement beaucoup de javascript qui est effectivement deux fois BASCULEMENT.

Créé 05/08/2008 à 13:34
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more