- ベストアンサー
IEで、labelタグ内の画像クリックで、背景色を変えたい！
こんにちは。IEでは、labelタグ内の画像をクリックしても、 forで指定したinput（チェックボックス）にチェックが付かないので、 色々検索して下記のソースに辿り着きましたが、 テキストと違い背景色が付きません。 どうしたら、IEでも背景色が付くのか、教えてください。お願いします。 ///// ここから ///////////////// <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Label</title> <script type="text/javascript"> function clickInput(label){ //forの指すidのinputタグがあるか探す var e = null; try { e = document.getElementById(label.htmlFor); } catch(exception){} if(e == null){ //labelタグ以下のinputタグを探す var node; for(var i=0; i<label.childNodes.length; i++){ node = label.childNodes.item(i); if(node.nodeName == 'INPUT'){ e = node; break; } } } if(e != null){ //inputタグにクリックされたときと同じ動作をさせる switch(e.type){ case 'checkbox': e.checked =! e.checked; return false; case 'radio': e.checked = true; return false; case 'text': case 'password': case 'textarea': e.focus(); return false; } } } function chebg(chkID){ var Myid = document.getElementById(chkID); Myid.parentNode.style.backgroundColor = Myid.checked == true ? '#fcc' : '#fff'; } </script> </head> <body> <form> <ul> <li><input type="checkbox" value="020" id="cBx1" name="color" onclick="chebg('cBx1');" /> <label for="cBx1">Get Adobe Reader</label><br /> <br /> <label for="cBx1" onclick = "return clickInput(this);"><img src="http://www.adobe.com/images/shared/download_buttons/get_adobe_reader.png" alt="020" width="158" height="39" /></label></li> </ul> </form> </body> </html> ///// ここまで /////////////////
- waterclock
- お礼率85% (175/205)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ちょっともうねむい。ばぶぅ～ みなおすより、かきなおしてしまったじょ！ いべんと、はりつけたけど、はがしてない！だけどもうねむい。 おやすみ。ばぶぅ～ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <title>Label click</title> <style type="text/css"> ul { list-style-type:none; margin:0; padding:0; } #a li { margin-bottom:10px; } </style> </head> <body> <form> <ul id="a"> <li> <label for="cBx1"> <input type="checkbox" value="020" name="color" id="cBx1"> Get Adobe Reader<br> <img src="img0.png" alt="020" width="158" height="39"> </label> </li> <li> <label for="cBx2"> <input type="checkbox" value="030" name="color" id="cBx2"> Get Adobe Reader<br> <img src="img1.png" alt="030" width="158" height="39"> </label> </li> </ul> </form> <script type="text/javascript"> //実行時には、全角空白文字は、半角に変換して下さい。 //@cc_on @set @F = (@_jscript_version >= 5.5) document./*@if(@F) attachEvent('on'+ @else@*/ addEventListener(/*@end@*/ 'click', (function (getTag, getTagInput) { return function (evt) { var obj = evt./*@if(@F) srcElement @else@*/ target /*@end@*/; var li = getTag('LI',obj); var ul = getTag('UL',obj); var inp = li && getTagInput(li); var f = false; if (ul && 'a' == ul.id) { if (inp.type == 'checkbox') { inp.checked = f = ! inp.checked; li.style.cssText = f ? 'background-color:#fdd': ''; } } }; })( function (t, o) { return o ? (t == o.nodeName) ? o: arguments.callee(t, o.parentNode) : null; }, (function (getNextNode) { return function (o) { var n = o.nextSibling; var s = o.firstChild;; while (s) { if ('INPUT' == s.nodeName) return s; s = getNextNode(s); if (s == n) break; } return null; }; })( function (node) { var n; if (n = node.firstChild) return n; do if (n = node.nextSibling) return n; while (node = node.parentNode); return null; } ) ), false); </script>
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
ご質問文では、リストのエレメントの位置関係がどのようになっているのかよくわかんないけど…（例が1個だけなので） 画像をクリックして、チェックボックスを直接クリックしたときと同じ動きをさせたいのなら、ご質問文の場合であれば case 'checkbox': e.checked =! e.checked; のあとで、 chebg(label.htmlFor); を呼び出すなどして、色を変更する処理を入れてあげればよいのでは？（他のcaseの時の処理も同様なのか不明ですが） スクリプトで e.checked =! e.checked; を実行しても、その項目をクリックしたイベントが発生するわけではないので、HTML内のonclick="chebg('cBx1');" が実行されるわけではありません。 全体像がよくわからないので勝手な想像ですが、画像とINPUT要素は1対1に対応しているのでしょうから、呼び出し側では ＞ onclick = "return clickInput(this);" とするよりも clickInput('cBx1') みたいに対象を直接指定してあげておいた方が後の処理が簡単だと思うけど？ （idで取れるのでinputタグを探す必要がなくなる）
お礼
どうもありがとうございます。 実際には、cBx1～cBx34まで34個のリストがあります。 結果的に、動作しております。
お礼
これ良いですね。完璧っす。凄いですね。 リスト数が多いので、この方法を利用させて頂きます。 どうもありがとうございました。