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

Question

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

我想要做的是保留复选框但隐藏它并允许用户点击图像（黑色圆圈或蓝色圆圈），然后打开/关闭复选框。但我无法弄清楚从哪里开始这样的事情。

想法？

Answer 1

示例： http://jsfiddle.net/Gfmz2/ （示例中显示复选框）

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

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

Answer 2

您可以将图片放入复选框的标签中，这有效地使其成为复选框的一部分（因此点击它会切换复选框）：

<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

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

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

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