jQuery - Creazione di un'immagine Toggle per una casella di controllo

Question

Ho una casella di controllo che è piuttosto semplice, è un valore booleano, vero/falso, selezionato o deselezionato.

Quello che mi piacerebbe fare è mantenere la casella di controllo ma nasconderlo e consentire all'utente di fare clic su un'immagine (un cerchio scuro o un cerchio blu) che dovrebbe quindi attivare/disattivare la casella di controllo. Ma non riesco a capire da dove cominciare qualcosa di simile.

Idee?

Answer 1

Esempio:http://jsfiddle.net/Gfmz2/(casella di controllo è visibile nell'esempio)

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

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

Answer 2

Oltre a quanto Patrick suggerito è possibile aggiungere il codice commutando immagine come di seguito:

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

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

Answer 3

È può mettere l'immagine nell'etichetta della casella di controllo, che la rende effettivamente parte della casella di controllo (quindi facendo clic su di essa si sposterà la casella di controllo):

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