Markieren Sie die Beschriftung, wenn das Kontrollkästchen aktiviert ist

Gibt es eine nicht-Javascript-Methode zum Ändern der Farbe eines Etiketts, wenn das entsprechende Kontrollkästchen aktiviert ist?

Wenn Sie haben

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

du kannst tun

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

Sehen Sie, wie das funktioniert . Beachten Sie, dass dies in nicht modernen Browsern nicht funktioniert.

Ich mag Andrews Vorschlag, und tatsächlich muss die CSS-Regel nur lauten:

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

Ich verlasse mich gerne auf die implizite Assoziation des labelund des inputElements, also würde ich so etwas tun:

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

mit CSS:

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

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

Dies ist ein Beispiel für die Verwendung der :checkedPseudoklasse, um Formulare zugänglicher zu machen. Die :checkedPseudoklasse kann mit versteckten Eingaben und ihren sichtbaren Beschriftungen verwendet werden, um interaktive Widgets wie Bildergalerien zu erstellen. Ich habe das Snipped für die Leute erstellt, die es testen wollen.

input[type=checkbox] + label {
  color: #ccc;
  font-style: italic;
} 
input[type=checkbox]:checked + label {
  color: #f00;
  font-style: normal;
} 

<input type="checkbox" id="cb_name" name="cb_name"> 
<label for="cb_name">CSS is Awesome</label> 

Sie können dies nicht allein mit CSS tun. Mit jQuery können Sie dies tun

HTML

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

CSS

.highlight{
    background:yellow;
}

jQuery

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

Dies funktioniert in allen Browsern

Überprüfen Sie das Arbeitsbeispiel unter http://jsfiddle.net/LgADZ/