jQuery - Tworzenie obrazu Przełącz na pole wyboru

Question

Mam pole wyboru, które jest dość proste, boolean, true/false, checked or unchecked.

Co chcę zrobić, to zachować pole wyboru, ale ukryć je i pozwolić użytkownikowi na kliknięcie obrazu (ciemne kółko lub niebieskie kółko), które będzie wtedy włączało/wyłączało to pole wyboru. Ale nie wiem, od czego zacząć od czegoś takiego.

Pomysły?

Answer 1

Przykład:http://jsfiddle.net/Gfmz2/(pole jest widoczne w przykładzie)

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

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

Answer 2

Oprócz tego, co Patrick zasugerował, można dodać zdjęcie przełączanie kodu jak poniżej:

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

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

Answer 3

You może umieścić obraz w etykiecie pola wyboru, co skutecznie powoduje, że jest ono częścią pola wyboru (więc kliknięcie spowoduje przełączenie pola wyboru):

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