jQuery - チェックボックスの画像トグルを作成する

Question

私はかなり単純なチェックボックスを持っています。ブール値、真/偽、チェックされているかチェックされていません。

私がしたいのは、チェックボックスをオンにして非表示にして、ユーザーが画像をクリックして（チェックボックスをオン/オフに切り替える）画像をクリックできるようにすることです。しかし、私はこのようなことをどこから始めるべきかを理解できません。

アイデア？

Answer 1

例：http://jsfiddle.net/Gfmz2/（チェックボックスを例に表示されている）パトリックは、あなたが以下のように画像トグルのコードを追加することができます示唆したものに加えて

var cbox = $('#myHiddenCheckbox')[0]; 

$('#myImage').click(function() { 
    cbox.checked = !cbox.checked; 
}); 

Answer 2

：

var cbox = $('#myHiddenCheckbox')[0]; 

$('#myImage').click(function() { 
    cbox.checked = !cbox.checked; 
     this.src = (cbox.checked)?"images/bluecircle.jpg":"images/blackcircle.jpg"; 
}); 

Answer 3

ますチェックボックスのラベルにイメージを置くことができます。これにより、チェックボックスの一部になります（クリックするとチェックボックスが切り替わります）。

<label for="moreinfo"> 
<img src="darkCircle.jpg"/> 
<input name="moreinfo" type="checkbox" id="moreinfo" style="display:none"> 
</label> 

$("#moreinfo").change(function() { 
    if(this.checked) { 
     $(this).prev().attr("src", "lightCircle.jpg"); 
    } else { 
     $(this).prev().attr("src", "darkCircle.jpg"); 
    } 
});