해당 확인란을 선택하면 레이블 색상을 변경하는 비 자바 스크립트 방법이 있습니까?
답변
당신이 가지고 있다면
<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;
}답변
이것은 :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')
})이것은 모든 브라우저에서 작동합니다