用图像替换复选框并更新 onClick（可能是 jQuery？）

Question

有没有一种方法可以让图像替换复选框，当有人单击它时，它会选择它，并将图像更改为另一个图像，例如“选中”图像？

所以本质上是：

[heart-icon] 健康和健身

用户点击它

[check-icon] 健康和健身

，现在该区域已被选择

Answer 1

肯定有可用的脚本/插件来执行此操作。我没有使用过其中任何一个，所以我不能具体推荐一个，但这里有一个例子：

http://www.itsalif.info/content/ezmark-jquery-checkbox-radiobutton-plugin

Answer 2

我会尝试这个插件：SimpleImageCheck
http://www.jkdesign.org/imagecheck/

自定义复选框的代码看起来很简单：

$('#checkbox').simpleImageCheck({
  image: 'unchecked.png',
  imageChecked: 'check.png'
  afterCheck: function(isChecked) {
    if (isChecked) {
      // do something
    }
  }
});

Answer 3

不需要插件，也不需要 JQuery：

<span onclick="changeCheck(this)">
<img src="http://www.clker.com/cliparts/e/q/p/N/s/G/checkbox-unchecked-md.png">
<img src="http://www.clker.com/cliparts/4/h/F/B/m/4/nxt-checkbox-checked-ok-md.png">
<input type="checkbox" name="chk">
</span>
<script>
function changeCheck(target)
{
    chk = target.lastElementChild;
    chk.checked = !chk.checked;
    target.children[+ chk.checked].style.display = '';
    target.children[1 - (+ chk.checked)].style.display = 'none';
}
function initCheck()
{
    chk = document.getElementsByName('chk')[0];
    chk.style.display = 'none';
    chk.parentNode.children[1 - (+ chk.checked)].style.display = 'none';
}
initCheck();
</script>