jQuery-为复选框创建图像切换

我有一个非常简单的复选框，它是一个布尔值，真/假，选中或未选中

我想做的是保留复选框，但将其隐藏，并允许用户单击图像（黑圈或蓝圈），然后切换复选框的开/关。但我不知道从哪里开始做这样的事情

想法？

示例：（示例中可见复选框）

---

除了Patrick建议的，您还可以添加图像切换代码，如下所示：

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

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

---

您可以将图像放入复选框的标签中，这实际上使其成为复选框的一部分（因此单击它将切换复选框）：

$（“#moreinfo”）.change（函数（）{
如果（选中此项）{
$（this.prev（）.attr（“src”、“lightCircle.jpg”）；
}否则{
$（this.prev（）.attr（“src”，“darkCircle.jpg”）；
}
});

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

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

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