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>

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

3 个答案: