IEでimg要素でlabelが効かない 
2010/8/30 月曜日 15:21:42
ラジオボタンとかチェックボックスを使うときって、
の中にがあった場合、普通に考えれば画像をクリックしたらラジオボタンやチェックボックスも選択した状態になるはずですが、
IEは切り替わりません。ありえない。
ちょっと調べたら色々出てくるんですが、多分簡単なのはこれかな。
<script type="text/javascript">
window.onload=function(){
var lab = document.getElementsByTagName('label');
for(var i=0;i<lab.length;i++){
var labimg = lab[i].getElementsByTagName('img');
for(var j=0;j<labimg.length;j++){
labimg[j].formCtrlId = lab[i].htmlFor;
labimg[j].onclick = function(){
document.getElementById(this.formCtrlId).click();
};
}
}
}
</script>
HTML側
<input type="radio" name="lab" id="a"><label for="a"><img src=""></label> <input type="radio" name="lab" id="b"><label for="b"><img src=""></label> <input type="radio" name="lab" id="c"><label for="c"><img src=""></label> <input type="radio" name="lab" id="d"><label for="d"><img src=""></label>
ページ内の[label]を取得して、各画像クリック時にラジオボタンをチェックさせるようにしてます。
しかしこれだとページ内の全ての[label]タグを取得してしまいます。
てことでちょっとだけ改良。
例えば、a～cまでの[label]を取得したい場合は・・・・
<script type="text/javascript">
window.onload=function(){
var obj = document.getElementById('in');
var lab = obj.getElementsByTagName('label');
for(var i=0;i<lab.length;i++){
var labimg = lab[i].getElementsByTagName('img');
for(var j=0;j<labimg.length;j++){
labimg[j].formCtrlId = lab[i].htmlFor;
labimg[j].onclick = function(){
document.getElementById(this.formCtrlId).click();
};
}
}
}
</script>
HTML側
<div id = "in"> <input type="radio" name="lab" id="a"><label for="a"><img src=""></label> <input type="radio" name="lab" id="b"><label for="b"><img src=""></label> <input type="radio" name="lab" id="c"><label for="c"><img src=""></label> </div> <input type="radio" name="lab" id="d"><label for="d"><img src=""></label>
こんな感じでinの中の[label]だけを取得させればいいんじゃないでしょうかっ！
