jQuery - 체크 박스를위한 이미지 토글 만들기

Question

나는 매우 단순한 체크 박스를 가지고 있으며, 부울, 참/거짓, 체크 또는 체크하지 않습니다.

내가하고 싶은 것은 확인란을 계속 누르고 있지만 숨기고 사용자가 이미지를 클릭하여 (어두운 원 또는 파란색 원) 체크 상자를 켜거나 끕니다. 그러나 나는 이런 식으로 어디서부터 시작해야 할지를 알 수 없다.

아이디어가 있으십니까?

Answer 1

예 :http://jsfiddle.net/Gfmz2/(체크 박스의 예에서 볼 수) 패트릭 당신은 아래 이미지 전환 코드를 추가 할 수 있습니다 무엇을 제안뿐만 아니라

var cbox = $('#myHiddenCheckbox')[0]; 

$('#myImage').click(function() { 
    cbox.checked = !cbox.checked; 
}); 

Answer 2

:

var cbox = $('#myHiddenCheckbox')[0]; 

$('#myImage').click(function() { 
    cbox.checked = !cbox.checked; 
     this.src = (cbox.checked)?"images/bluecircle.jpg":"images/blackcircle.jpg"; 
}); 

Answer 3

당신을 이미지를 확인란의 레이블에 넣을 수 있습니다. 그러면 레이블이 효과적으로 확인란의 일부가됩니다 (따라서 클릭하면 확인란이 전환됩니다) :

<label for="moreinfo"> 
<img src="darkCircle.jpg"/> 
<input name="moreinfo" type="checkbox" id="moreinfo" style="display:none"> 
</label> 

$("#moreinfo").change(function() { 
    if(this.checked) { 
     $(this).prev().attr("src", "lightCircle.jpg"); 
    } else { 
     $(this).prev().attr("src", "darkCircle.jpg"); 
    } 
});