画像をクリックしてチェックボックスをチェックする

Question

サムネイルの下にチェックボックスがあります。ここにはhttp://jsfiddle.net/pAYFa/サムネイルをクリックしてチェックします。チェックボックスがオンになっています。私はこれがjavascriptでできると思う、私はjavascriptの任意のヘルプappriciateよ。ありがとう。

Answer 1

イメージをラベルに貼り、重複IDを削除するだけです。私はあなたの最初のもののためにそれをやった：文書でhttp://jsfiddle.net/karim79/pAYFa/1/

各IDはspecificationあたりとして一意である必要があります。

Answer 2

さて、最も簡単な方法は、画像の周りにラベルを貼ることです。これはあなたが望むものとまったく同じです：

<label for="img1"><img class="img" src="http://s5.tinypic.com/30v0ncn_th.jpg" /></label> 
<input type="checkbox" class="chk " checked="checked" id="img1" name="img1" value="0" /> 

いいえjavascriptが必要です！同じIDを持つ要素を複数持つことはできませんので、<img>タグからid="img1"を削除する必要があります。

Answer 3

画像にイベントハンドラを添付する方法が不思議であれば、上記の回答はjavascriptで行う必要はありません。チェックボックスIDをイメージID以外のものに変更する必要があります。それは少し難しくなり、なし

$('img').click(function(){ 
    $(this).next().click(); 
}) 

：私は、これは子どもの遊びであるjQueryを使ってchk2

document.getElementById('img2').onclick = function() //attach to onclick 
{        
     var checkbox = document.getElementById('chk2'); //find checkbox 

     checkbox.checked = !checkbox.checked; //toggle the checked status 
} 

Answer 4

にそれを改名しました。私は、IDの（img1_cbとimg2_cb）あなたのチェックボックスがユニーク与え、各画像等にクリックハンドラを追加しました：

<img class="img" src="http://s5.tinypic.com/30v0ncn_th.jpg" id="img1" onclick="toggle('img1_cb')" /> 

その後JavaScriptがいた：ノートの

function toggle(what){ 
    var cb = document.getElementById(what); 
    cb.checked = !cb.checked; 
}