jQuery - Creación de una Alternancia de imagen para una casilla de verificación

Question

Tengo una casilla de verificación que es bastante simple, es un booleano, verdadero/falso, marcado o no seleccionado.

Lo que me gustaría hacer es mantener la casilla de verificación pero ocultarla y permitir que el usuario haga clic en una imagen (un círculo oscuro o un círculo azul) que activaría/desactivaría la casilla de verificación. Pero no puedo averiguar por dónde empezar en algo como esto.

Ideas?

Answer 1

Ejemplo:http://jsfiddle.net/Gfmz2/(casilla es visible en el ejemplo)

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

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

Answer 2

Además de lo que Patrick sugirió puede agregar el código de la imagen activando la siguiente manera:

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

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

Answer 3

Usted puede poner la imagen en la etiqueta de la casilla de verificación, lo que efectivamente lo hace parte de la casilla de verificación (por lo que al hacer clic en ella se activará la casilla de verificación):

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