JQuery - Creating an image switcher for a checkbox

Question

I have a checkbox that is pretty simple, it's logical, true / false, marked or unchecked.

What I would like to do is save the checkbox, but hide it and allow the user to click on the image (dark circle or blue circle), which will then turn the checkbox on / off. But I can’t figure out where to start something like that.

Ideas?

Answer 1

Example: http://jsfiddle.net/Gfmz2/ (check box shown in the example)

var cbox = $('#myHiddenCheckbox')[0]; $('#myImage').click(function() { cbox.checked = !cbox.checked; }); 

Answer 2

You can put the image in the flag label, which actually makes it part of the flag (so clicking on it will switch the flag):

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

Answer 3

In addition to what Patrick suggested, you can add an image switching code, as shown below:

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