CSS : 체크 박스 목록으로 스타일 변경

Question

나는 체크 박스 목록을 가지고 있습니다. 다르게 강조 표시하기 위해 스타일을 변경하고 싶습니다. 내가 필요한 것을 보여주는 첫 번째와 두 번째 링크를보십시오.

내 문제는 항목을 선택하면 html 코드가 변경되지 않는다는 것입니다. 나는

http://dl.dropbox.com/u/72686/Picture%201.png

http://dl.dropbox.com/u/72686/viewsFilter2.png

감사

Answer 1

Rohancragg's answer 좋은 ... CSS를들이 선택 해제됨에 따라 체크 박스를도를 unstyle하는 것을 잊지 마세요

속성 조작,하지만 난 컨트롤의 클래스 이름을 사용하도록 충동을 보시기 바랍니다. 당신은 HTML을 제공하지만, 가정하고, 레이블과 체크 박스 주위에 포함 된 요소가있어하지 않는

$("#content input[type='checkbox'], #content label").click(function(){ 
    $(this).parent().toggleClass("selected"); 
}); 

(실수에 스타일을 적용하지 않도록 #content 단지, 그들은 모든있어 일부 큰 용기 인과 관심있는 분야 밖에있는 것들)가 효과가 있습니다. 그런 다음 CSS에서 여러 요소에 스타일을 적용 할 수 있으며 스타일을 변경하기 위해 jQuery를 편집 할 필요가 없습니다.

.selected { background-color:blue; } 
.selected label { font-weight:bold; color:#ffffff; } 

등등.

Answer 2

This should prove useful to you, good stuff there.

Answer 3

당신은 사용할 수 JQuery와 스타일의 요소가 ... 클래스 = 같아요 "선택"뭔가를 필요로하는 jQuery(':checked') [설명 : 확인 된 모든 요소와 일치합니다.] (체크 박스와 라디오 버튼에서 작동).

당신은 문제의 모든 확인란의 .click 이벤트에 기능을 할당 할

- 페이지의 예에서와 같이 : 당신의 .css(propertyName, value) 세터를 사용할 것입니다 각 확인 체크 박스

$(":checkbox").click(countChecked);