เน้นป้ายกำกับหากเลือกช่องทำเครื่องหมาย

มีวิธีที่ไม่ใช้จาวาสคริปต์ในการเปลี่ยนสีของฉลากเมื่อเลือกช่องทำเครื่องหมายที่เกี่ยวข้องหรือไม่

ถ้าคุณมี

<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;
}

ดูการทำงานนี้ โปรดทราบว่าจะใช้ไม่ได้กับเบราว์เซอร์ที่ไม่ทันสมัย

ฉันชอบคำแนะนำของ 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/

นี่คือตัวอย่างของการใช้: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> 

คุณไม่สามารถทำได้ด้วย 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/