Đánh dấu nhãn nếu hộp kiểm được chọn

Có cách nào không phải javascript để thay đổi màu của nhãn khi hộp kiểm tương ứng được chọn không?

Nếu bạn có

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

bạn có thể làm

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

Xem điều này làm việc . Lưu ý rằng điều này sẽ không hoạt động trong các trình duyệt không hiện đại.

Tôi thích đề xuất của Andrew và trên thực tế, quy tắc CSS chỉ cần là:

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

Tôi muốn dựa vào sự kết hợp tiềm ẩn của labelvà inputyếu tố, vì vậy tôi muốn làm một cái gì đó như thế này:

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

với CSS:

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

Ví dụ: http://jsfiddle.net/wrumsby/vyP7c/

Đây là một ví dụ về việc sử dụng lớp :checkedgiả để làm cho các biểu mẫu dễ tiếp cận hơn. Lớp :checkedgiả có thể được sử dụng với các đầu vào ẩn và nhãn hiển thị của chúng để xây dựng các vật dụng tương tác, chẳng hạn như phòng trưng bày hình ảnh. Tôi đã tạo đoạn trích cho những người muốn thử nghiệm.

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> 

Bạn không thể làm điều này chỉ với CSS. Sử dụng jQuery bạn có thể làm

HTML

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

CSS

.highlight{
    background:yellow;
}

jQuery

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

Điều này sẽ hoạt động trên tất cả các trình duyệt

Kiểm tra ví dụ làm việc tại http://jsfiddle.net/LgADZ/