Réponses:
Enveloppez la case à cocher dans une label
balise:
<label><input type="checkbox" name="checkbox" value="value">Text</label>
for
attributUtilisez l' for
attribut (faites correspondre la case à cocher id
):
<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">Text</label>
REMARQUE : l'ID doit être unique sur la page!
Puisque les autres réponses ne le mentionnent pas, une étiquette peut inclure jusqu'à 1 entrée et omettre l' for
attribut, et on supposera que c'est pour l'entrée en son sein.
Extrait de w3.org (avec emphase):
[L'attribut for] associe explicitement l'étiquette en cours de définition à un autre contrôle. Lorsqu'il est présent, la valeur de cet attribut doit être la même que la valeur de l'attribut id d'un autre contrôle dans le même document. En cas d'absence, l'étiquette en cours de définition est associée au contenu de l'élément.
Pour associer une étiquette à un autre contrôle implicitement, l'élément de contrôle doit se trouver dans le contenu de l'élément LABEL . Dans ce cas, LABEL ne peut contenir qu'un seul élément de contrôle. L'étiquette elle-même peut être positionnée avant ou après le contrôle associé.
L'utilisation de cette méthode présente certains avantages par rapport à for
:
Pas besoin d'attribuer un id
à chaque case à cocher (super!).
Pas besoin d'utiliser l'attribut supplémentaire dans le <label>
.
La zone cliquable de l'entrée est également la zone cliquable de l'étiquette, il n'y a donc pas deux endroits distincts pour cliquer qui peuvent contrôler la case à cocher - un seul, peu importe la distance entre le <input>
texte de l'étiquette et le texte réel, et quel que soit le type de CSS que vous appliquer à elle.
Démo avec du CSS:
label {
border:1px solid #ccc;
padding:10px;
margin:0 0 10px;
display:block;
}
label:hover {
background:#eee;
cursor:pointer;
}
<label><input type="checkbox" />Option 1</label>
<label><input type="checkbox" />Option 2</label>
<label><input type="checkbox" />Option 3</label>
Assurez-vous simplement que l'étiquette est associée à l'entrée.
<fieldset>
<legend>What metasyntactic variables do you like?</legend>
<input type="checkbox" name="foo" value="bar" id="foo_bar">
<label for="foo_bar">Bar</label>
<input type="checkbox" name="foo" value="baz" id="foo_baz">
<label for="foo_baz">Baz</label>
</fieldset>
<input type="checkbox" name="foo[]" value="bar" ...>
. Cela vous donnera un tableau qui contient les valeurs de toutes les cases cochées (qui ont ce nom). Par exemple $_POST['foo'][0]
pourrait être bar
et $_POST['foo'][1]
pourrait être baz
(si les deux sont cochés).
Vous pouvez également utiliser des pseudo-éléments CSS pour sélectionner et afficher vos étiquettes à partir de tous les attributs de valeur de votre case à cocher (respectivement).
Edit: Cela ne fonctionnera qu'avec les navigateurs webkit et blink (Chrome (ium), Safari, Opera ....) et donc la plupart des navigateurs mobiles. Pas de support Firefox ou IE ici.
Cela peut être utile uniquement lors de l'intégration de webkit / blink dans vos applications.
<input type="checkbox" value="My checkbox label value" />
<style>
[type=checkbox]:after {
content: attr(value);
margin: -3px 15px;
vertical-align: top;
white-space:nowrap;
display: inline-block;
}
</style>
Toutes les étiquettes de pseudo-élément seront cliquables.
<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />
name
valeur de l' attribut pour quelque chose de différent de la valeur présente dans les attributs for
et id
, car ces deux sont liés, alors que ce name
n'est pas le cas (il est cependant obligatoire d'être inclus, je crois cependant) .
Ça marche aussi:
<form>
<label for="male"><input type="checkbox" name="male" id="male" />Male</label><br />
<label for="female"><input type="checkbox" name="female" id="female" />Female</label>
</form>
for
et id
dans votre exemple, car la label
balise ne contient qu'un seul élément d'entrée.
Cela devrait vous aider: W3Schools - Labels
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
<label for="my_checkbox">Check me</label>
<input type="checkbox" name="my_checkbox" value="Car" />
Utilisez l' label
élément et l' for
attribut pour l'associer à la case à cocher:
<label for="myCheckbox">Some checkbox</label> <input type="checkbox" id="myCheckbox" />
Dans l'étiquette de matériau angulaire avec case à cocher
<mat-checkbox>Check me!</mat-checkbox>
Utilisez ceci
<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id" id="checkbox_lbl">Text</label>
$("#checkbox_lbl").click(function(){
if($("#checkbox_id").is(':checked'))
$("#checkbox_id").removAttr('checked');
else
$("#checkbox_id").attr('checked');
});
});