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

【问题标题】：Replacing Checkbox with image and update onClick (possibly jQuery?)用图像替换复选框并更新onClick（可能是jQuery？）
【发布时间】：2011-06-21 02:45:23
【问题描述】：

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

所以本质上：

[heart-icon] 健康和健身

用户点击它

[check-icon] 健康和健身

现在该区域已被选中

【问题讨论】：

您可能需要检查Help with a pure CSS Checkbox Image replacement?。

标签： javascript jquery select checkbox

【解决方案1】：

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

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

【讨论】：

您可能需要检查Help with a pure CSS Checkbox Image replacement?。

【解决方案2】：

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

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

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

【讨论】：

这太棒了！正是我想要的。谢谢！！我将如何添加多个图标而不是一个静态 unchecked.png，比如我想要 16 个不同的图标并在点击后将它们全部更改为 check.png？

【解决方案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>

【讨论】：