チェックボックスをimageに置き換えてonClick（おそらくjQueryですか？）

Question

イメージをチェックボックスに置き換える方法はありますか。誰かがクリックすると、そのイメージを選択してイメージを別のイメージに変更します。チェックされた "画像？

だから、基本的に：それ

上

[ハートアイコン]健康とフィットネス

ユーザーがクリックし、[チェックインのアイコンを]健康とフィットネス

、今その領域があります選択しました

Answer 1

これを行うには確かにスクリプト/プラグインがあります。チェックボックスが見えカスタマイズするSimpleImageCheck http://www.jkdesign.org/imagecheck/

コード：

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

Answer 2

が、私はこのプラグインをしようとするだろう：私はので、私は具体的には、1つのをお勧めすることはできませんそれらのいずれかを使用しますが、ここでは一例ですいませんでしたシンプル：プラグインの

$('#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>