用图像替换复选框并更新onClick (可能是jQuery?)

Question

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

因此，本质上：

心像健康与健康

用户点击它

检查图标健康与健身

现在这个区域被选中了

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>