Mettez en surbrillance l'étiquette si la case est cochée

Question

Est-il un non-javascript façon de changer la couleur de l'étiquette quand la case correspondante est cochée?

Answer 1

Si vous avez

<div>
  <input type="checkbox" class="check-with-label" />
  <label class="label-for-check">My Label</label>
<div>

vous pouvez le faire

.check-with-label:checked + .label-for-check {
  font-weight: bold;
}

Voir ce travail. Notez que cela ne fonctionne pas non les navigateurs modernes.

Answer 2

J'aime Andrew suggestion, et, en fait, la règle CSS ne doit être:

:checked + label {
   font-weight: bold;
}

J'aime me reposer implicite de l'association de l' label et de la input élément, alors j'aimerais faire quelque chose comme ceci:

<label>
   <input type="checkbox"/>
   <span>Bah</span>
</label>

avec les CSS:

:checked + span {
    font-weight: bold;
}

Exemple: http://jsfiddle.net/wrumsby/vyP7c/

Answer 3

Vous ne pouvez pas le faire avec du CSS seul. À l'aide de jQuery, vous pouvez le faire

HTML

<label id="lab">Checkbox</label>
<input id="check" type="checkbox" />

CSS

.highlight{
    background:yellow;
}

jQuery

$('#check').click(function(){
    $('#lab').toggleClass('highlight')
})

Cela fonctionne dans tous les navigateurs

Vérifier exemple de travail à http://jsfiddle.net/LgADZ/