jQuery의 현재 요소 배경 변경

Question

<label class="default" for="checkbox1"><input id="checkbox1" name="checkbox1" type="checkbox" style="display:none" /> some text</label><br /> 
<label class="default" for="checkbox2"><input id="checkbox2" name="checkbox2" type="checkbox" style="display:none" /> some text</label><br /> 
<label class="default" for="checkbox3"><input id="checkbox3" name="checkbox3" type="checkbox" style="display:none" /> some text</label><br /> 

jQuery를 사용하여 현재 클릭 된 확인란의 레이블 배경색을 어떻게 변경해야합니까? 예를 들어 두 번째 체크 박스는 스타일이 "검사"로 변경해야합니다 확인하는 경우 :

<label class="checked" for="checkbox2"><input id="checkbox2" name="checkbox2" type="checkbox" style="display:none" /> some text</label><br /> 

Answer 1

, 부모 "라벨"요소를 잡고 "확인"할 수있는 CSS 클래스를 전환하려면 클릭 기능을 할당 할 수 있습니다. 이렇게하면 클래스가 추가되고 확인란의 상태에 따라 클래스가 제거됩니다. 대신 위 한 일

<label class="checked" for="checkbox2"><input id="checkbox2" name="checkbox2" type="checkbox" style="display:none" /> some text</label><br /> 

을 : 당신이 경우에

$("input:checkbox").click(function() { $(this).parent("label").toggleClass("checked"); 

또한, 당신은 당신의 CSS 클래스 이름이 더 행운이있을 것이다. ;)

Answer 2

당신은 change 이벤트를 처리하고 this.checked 여부를 확인 후 배경 색상을 설정해야합니다. 예를 들어
는 :

그래서를 사용하여 jQuery를에 체크 박스 선택이있다

$(':checkbox').change(function() { 
    $(this).css('background-color', this.checked ? 'red' : 'transparent'); 
}); 

Answer 3

$("input[@type='checkbox']").click(function(){ 
    $(this).toggleClass('checked'); 

}); 

Answer 4

귀하의 HTML은 더 다음과 같아야합니다

JQuery와는 다음과 같이 표시됩니다

$("input[type=checkbox]").select(function() { 
    $(this).toggleClass("checked"); 
});