用圖片替換復選框並更新onClick（可能是jQuery？）

Question

有沒有一種方法可以使圖像替換復選框，當有人單擊它時，它選擇它，然后將圖像更改為另一個圖像，例如“選中的”圖像？

所以本質上：

[心臟圖標]健康與健身

用戶點擊它

[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>