Выделить ярлык, если флажок установлен

Ответ 1

Если у вас

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

вы можете сделать

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

Посмотрите, как это работает. Обратите внимание, что это не будет работать в несовременных браузерах.

Ответ 2

Мне нравится предложение Andrew, и на самом деле правило CSS должно быть только:

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

Мне нравится полагаться на неявное объединение элемента label и input, поэтому я бы сделал что-то вроде этого:

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

с CSS:

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

Пример: http://jsfiddle.net/wrumsby/vyP7c/

Ответ 3

Это пример использования псевдо-класса :checked, чтобы сделать формы более доступными. Псевдокласс класса :checked может использоваться со скрытыми входами и их видимыми ярлыками для создания интерактивных виджетов, таких как галереи изображений. Я создал отрезанный для людей, которые хотят проверить.

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> 

Ответ 4

Вы не можете сделать это только с помощью CSS. Используя jQuery, вы можете сделать

HTML

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

CSS

.highlight{
    background:yellow;
}

JQuery

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

Это будет работать во всех браузерах

Проверьте рабочий пример http://jsfiddle.net/LgADZ/