こんにちは。IEでは、labelタグ内の画像をクリックしても、
forで指定したinput(チェックボックス)にチェックが付かないので、
色々検索して下記のソースに辿り着きましたが、
テキストと違い背景色が付きません。
どうしたら、IEでも背景色が付くのか、教えてください。お願いします。

///// ここから /////////////////

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<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_butt … alt="020" width="158" height="39" /></label></li>
</ul>
</form>
</body>
</html>

///// ここまで /////////////////

このQ&Aに関連する最新のQ&A

A 回答 (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>
    • good
    • 0
この回答へのお礼

これ良いですね。完璧っす。凄いですね。
リスト数が多いので、この方法を利用させて頂きます。
どうもありがとうございました。

お礼日時:2009/05/15 00:52

ご質問文では、リストのエレメントの位置関係がどのようになっているのかよくわかんないけど…(例が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タグを探す必要がなくなる)
    • good
    • 0
この回答へのお礼

どうもありがとうございます。
実際には、cBx1~cBx34まで34個のリストがあります。
結果的に、動作しております。

お礼日時:2009/05/15 00:49

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング