- ベストアンサー
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個のリストがあります。 結果的に、動作しております。
関連するQ&A
- 特定の<input >タグ及び<label>タグの部分をCSSで非表示にしたい。
下記コードの<input >タグ及び<label>タグの部分をCSSで非表示にしたいのですが、 <div class="image-size-item"> <input id="image-size-thumbnail-142" type="radio" value="thumbnail" name="attachments[142][image-size]"/> <label for="image-size-thumbnail-142">サムネイル</label> <label class="help" for="image-size-thumbnail-142">(96 × 96)</label> </div> 問題はimage-size-thumbnail-142の最後の番号及び桁数が出力ごとに変化します（例：image-size-thumbnail-154、image-size-thumbnail-2223等）。このような場合、CSSはどのように記述すればよいのでしょうか？ CSSは、システムの関係上、同ページのヘッダー内に記述する必要があり、タグ内に直接記述することはできません。 以下のようなCSSコードを<head>内に記述しましたが、 <style type="text/css"> [id~="image-size-thumbnail"] { display: none; } [for~="image-size-thumbnail"] { display: none; } </style> 上記コードの<input >タグ及び<label>タグの部分を非表示にすることができません。どこが間違っているかご指摘いただけると幸いです。また、もっと良い方法があれば、教えてください。 なお、同ページには他の部分において<input >タグ及び<label>タグが使用されている箇所が複数ありますので、<input >タグ及び<label>タグ部分を全て表示にするというCSSの記述は使用できません。 参考サイト等ありましたら、教えて下さい。 よろしくお願いします。
- 締切済み
- HTML
- チェックボックスがIE８で正しく動作しないのはなぜ
下記サンプルコードをIE８やIE７で試してみると、チェックボックスをクリックしても その時点で動かず、ウインドウ上のどこかをクリックしないと動きません。 Firefox, Chrome, IE9ではチェックボックスをクリックした時点で動きます。 どこに問題があるのでしょうか。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> </head> <body> <form> <ul id="t"> <li><input type="checkbox" name="t_0" onchange="fff()" value="0pt" /><label for="t_0">0pt</label></li> <li><input type="checkbox" name="t_1" onchange="fff()" value="10pt" /><label for="t_1">10pt</label></li> <li><input type="checkbox" name="t_2" onchange="fff()" value="20pt" /><label for="t_2">20pt</label></li> <li><input type="checkbox" name="t_3" onchange="fff()" value="30pt" /><label for="t_3">30pt</label></li> <li><input type="checkbox" name="t_4" onchange="fff()" value="40pt" /><label for="t_4">40pt</label></li> <li><input type="checkbox" name="t_5" onchange="fff()" value="50pt" /><label for="t_5">50pt</label></li> <li><input type="checkbox" name="t_6" onchange="fff()" value="60pt" /><label for="t_6">60pt</label></li> <li><input type="checkbox" name="t_7" onchange="fff()" value="70pt" /><label for="t_7">70pt</label></li> <li><input type="checkbox" name="t_8" onchange="fff()" value="80pt" /><label for="t_8">80pt</label></li> <li><input type="checkbox" name="t_9" onchange="fff()" value="90pt" /><label for="t_9">90pt</label></li> <li><input type="checkbox" name="t_10" onchange="fff()" value="100pt" /><label for="t_10">100pt</label></li> </ul> </form> <table> <tr> <td>サンプル1 ：</td><td>60pt</td> </tr> </table> <table> <tr> <td>サンプル2 ：</td><td>30pt</td> </tr> </table> <table> <tr> <td>サンプル3 ：</td><td>40pt</td> </tr> </table> <script type="text/javascript"> function fff() { var a = new Array; var b = document.getElementById('t').getElementsByTagName("input"); var c = document.getElementsByTagName('table'); for(i=0,len=b.length; i<len; i++){ if(b[i].checked == true){ a[i] = b[i].value; }else{ a[i] = ""; } } for(i=0,len=c.length; i<len; i++){ var d = c[i].getElementsByTagName('td'); var e = d[1].innerHTML; var if1 = a[0]==e || a[1]==e || a[2]==e || a[3]==e || a[4]==e || a[5]==e || a[6]==e || a[7]==e || a[8]==e || a[9]==e || a[10]==e; var if2 = a[0]=="" && a[1]=="" && a[2]=="" && a[3]=="" && a[4]=="" && a[5]=="" && a[6]=="" && a[7]=="" && a[8]=="" && a[9]=="" && a[10]==""; if(if1 || if2){ c[i].style.display = ''; }else{ c[i].style.display = 'none'; } } } </script> </body> </html>
- ベストアンサー
- JavaScript
- 複数あるチェックボックスからひとつだけ選択
よろしくお願いします。 複数あるチェックボックスから常にひとつだけしか選択できないように したく、色々調べてみたところ、下記のようなスクリプトを見つけました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>sample</title> <script type="text/javascript"> var before = null; function test(e) { var tgt = e.srcElement ? e.srcElement: e.target; if (before == tgt && tgt.checkd == true) { tgt.checked = true; } else { var chks = document.getElementsByName('radiolike'); for (var i = 0; i < chks.length; i++) { if (chks[i] != tgt) chks[i].checked = false; } } before = tgt; } </script> </head> <body> <form id="SAMPLE" action="#" onclick="test(event);"> <label for="c1"><input name="radiolike" id="c1" type="checkbox" value="0">Item1</label> <label for="c2"><input name="radiolike" id="c2" type="checkbox" value="1">Item2</label> <label for="c3"><input name="radiolike" id="c3" type="checkbox" value="2">Item3</label> </form> </body> </html> 上記のチェックボックス群を同ページに複数置きたいときは、どのよう にスクリプトを変えたらよいのか分からずとても困っております。 分かりづらい説明で誠に申し訳ありません。 補足説明致しますので、どうかご教授下さいますようお願い致します。
- ベストアンサー
- JavaScript
- IMGタグのsrcを同時に変更することができない
radioボタンを押すと画像をそれぞれ切り替えるものを作りたく、試してみたのですが思うように動きません。最後のiB.children[i].src = vvv[j] + ".jpg";が１つのIMGタグに対してしか効いていないせいのようです。複数のIMGタグのsrcも同時に変更していきたいのですがどのようにしたら良いのでしょうか。 <html xml:lang="ja" lang="ja"> <head> <title>radioボタンを押して3×3パターンの画像を切り替える</title> <script type="text/javascript"> function imgChange(evt){ var t = evt.target || evt.srcElement; if(t.nodeName != "INPUT") return; var inp = t.parentNode.getElementsByTagName("input"); var nnn = [], vvv = []; for(i=0; node=inp[i++];){ if(node.type == "radio" && node.checked) { nnn.push(node.name); vvv.push(node.value); } } var iB = document.getElementById('imgBOX'); var iBlen = iB.children.length; for(i=0; iBlen>i; i++){ //処理前のalert alert("before : src = "+iB.children[i].src); //IMGタグのsrc通りの結果に。 if(iB.children[i].tagName != "IMG") continue; for(j=0, node=nnn[j]; inp.length>j; j++){ if(iB.children[i].name == node){ iB.children[i].src = vvv[j] + ".jpg"; } break; } //処理後のalert alert("after : src = "+iB.children[i].src); //一番最初のIMGだけが変更され、残りは変更されず。 } } </script> </head> <body> <form action="#" onclick="imgChange(event);"> 画像Ａの切替⇒ <input type="radio" name="imgA" value="3" checked /> <input type="radio" name="imgA" value="4" /> <input type="radio" name="imgA" value="5" /> <br /> 画像Ｂの切替⇒ <input type="radio" name="imfB" value="6" checked /> <input type="radio" name="imfB" value="7" /> <input type="radio" name="imfB" value="8" /> <input type="radio" name="imfB" value="9" /> <input type="radio" name="imfB" value="10" /> <br /> 画像Ｃの切替⇒ <input type="radio" name="imgC" value="11" checked /> <input type="radio" name="imgC" value="12" /> </form> <p>----------------------------------</p> <div id="imgBOX"> 画像Ａは<img width="20" src="0.jpg" name="imgA" alt="画像Ａ" /> <br /> 画像Ｂは<img width="20" src="1.jpg" name="imfB" alt="画像Ｂ" /> <br /> 画像Ｃは<img width="20" src="2.jpg" name="imgC" alt="画像Ｃ" /> </div> </body> </html>
- ベストアンサー
- JavaScript
- オブジェクト名に変数を使いたい
<form id="form1" name="form1" method="post" action=""> <label for="q1-1"><input id="q1-1" name="q1" type="radio" value="1" />あ</label> <label for="q1-2"><input id="q1-2" name="q1" type="radio" value="0" />い</label> <label for="q1-3"><input id="q1-3" name="q1" type="radio" value="0" />う</label> <label for="q1-4"><input id="q1-4" name="q1" type="radio" value="0" />え</label> <label for="q2-1"><input id="q2-1" name="q2" type="radio" value="1" />あ</label> <label for="q2-2"><input id="q2-2" name="q2" type="radio" value="0" />い</label> <label for="q2-3"><input id="q2-3" name="q2" type="radio" value="0" />う</label> <label for="q2-4"><input id="q2-4" name="q2" type="radio" value="0" />え</label> </form> ============================================================ 上のような４択の問題が10問あります。 これを採点して合計点数を表示させたいと思っていますが、 下記のようにfor文を使う際、オブジェクト名の、"q1"の"1"というところに変数nを使いたいのですが、やり方がわかりません。 ============================================================ for(var n=0;n<10;n++){ var length=document.form1.q1.length; for(var i=0;i<length;i++){ var checked=document.form1.q1[i].checked; if(checked==true){ ans = i; } } var value=document.form1.q1[ans].value; } ============================================================ いろいろ調べてみましたが、うまくいかず固まっております。 どなたかご教授いただけませんでしょうか？
- ベストアンサー
- JavaScript
- inputタグのnameとvalue属性について教えてください。
inputタグのnameとvalue属性について教えてください。 <label><input type="radio" name="性別" value="男" />男</label> <label><input type="radio" name="性別" value="女" />女</label> という風にformの内容は「name:valueで1セット」として送信されると思っていました しかしxhtml1.1ではname属性が廃止されたと思います。 xhtmlではvalueだけでデータを送信するのでしょうか? それとも、form内のname属性は例外でしょうか?
- 締切済み
- HTML
- チェックの入れ方によってリンク先を変える
お世話になります。 チェックの入れ方によってリンク先を変える方法ですが、 他の回答者様がすでに回答れていまして、解決しているのですが、質問はチェックボックスが3つという想定ですが、4つあるとして、表記している組み合わせ以外の場合は同じページに飛ばすことはできますでしょうか？元の回答は下記です。わかる方がいたらお願いいたします。 <html> <head> <title>さんぷる</title> <style type="text/css"> #checklist{ list-style-type:none; margin:0;padding:0; } #checklist li{ margin:0;padding:0; } </style> <script type="text/javascript"> function jump1(){ var clist = document.getElementById('checklist').getElementsByTagName('input'); var URLlist = new Array(); URLlist['100'] = '1.html'; URLlist['010'] = '2.html'; URLlist['001'] = '3.html'; URLlist['110'] = '12.html'; URLlist['101'] = '13.html'; URLlist['011'] = '23.html'; URLlist['111'] = '111.html'; var condition=''; for(var i=0;i<clist.length;i++) { condition += (clist[i].checked)?'1':'0'; } if(condition == '000') { alert('チェックが一つもありません'); return; } //alert(URLlist[condition]);return; //テスト用 location.href=URLlist[condition]; } function jump2(){ var clist = document.getElementById('checklist').getElementsByTagName('input'); var condition=''; for(var i=0;i<clist.length;i++) { condition += (clist[i].checked)?i+1:''; } if(condition == '') { alert('チェックが一つもありません'); return; } //alert(condition+'.html');return; //テスト用 location.href=condition+'.html'; } </script> </head> <body> <ul id="checklist"> <li><input type="checkbox" id="cb01"><label for="cb01">項目1</label></li> <li><input type="checkbox" id="cb02"><label for="cb02">項目2</label></li> <li><input type="checkbox" id="cb03"><label for="cb03">項目3</label></li> </ul> <p><input type="button" value="ボタン" onclick="jump1()"></p> </body> </html>
- 締切済み
- HTML
- VBScript＋IEのチェックボックス判定
VBScript(wsh)に関する質問です． InternetExplorerのオブジェクトを作成し，ie.Document.Writeで下記のようにチェックボックスを複数配置しました． <INPUT type="checkbox" id="id0">あああ <INPUT type="checkbox" id="id1">いいい 各チェックボックスがチェックされているか判定したいのですが， for文を用いた場合どのようにすればよいのでしょうか？ If ie.Document.all.id0.checked Then … If ie.Document.all.id1.checked Then … のように逐次的に記述しては可変数の場合は対応できません． inputタグのidをすべて"id"として <INPUT type="checkbox" id="id">あああ <INPUT type="checkbox" id="id">いいい For i=0 To n If ie.Document.all.id(i).checked Then … で可能なようですが，ラベルをクリックしたときもチェックされるように <INPUT type="checkbox" id="id0"><label for="id0">あああ</label> とする必要があり，同一のidをinputタグに使用できない状況です． よろしくお願いします．
- ベストアンサー
- Visual Basic
- このコードを処理速度向上させることはできますか？
このコードを処理速度向上させることはできますか？ <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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" /> <script type="text/javascript"> //<![CDATA[ function className(str){ var alltag = document.getElementsByTagName("*"); var ary = []; for(var i=0;i<alltag.length;i++){ if("."+alltag[i].className == str){ ary.push(alltag[i]); } } return ary; } window.$ = function(str){ var ID = str.match(/^#(\w+)/), CLASS = str.match(/^\.(\w+)/), TAG = str.match(/^(\w+)|(\*)/), node = str.match(/^doc/)? document: TAG? document.getElementsByTagName(RegExp.$1==""?RegExp.$2:RegExp.$1): ID? document.getElementById(RegExp.$1): CLASS? navigator.appVersion.toLowerCase().indexOf("msie")? className(str): document.getElementsByClassName(RegExp.$1): null; this.style = function(css){ css = css.split(/\:|\;/); if(ID){ for(var j=0;j<css.length;j++) node.style[css[j].replace(/\s+/g,"").replace(/\-(\w)/,function($1){$1=$1.substr(1);return $1.toUpperCase()})] = css[j+1]; }else{ for(var i=0;i<node.length;i++){ for(var j=0;j<css.length;j++) node[i].style[css[j].replace(/\s+/g,"").replace(/\-(\w)/,function($1){$1=$1.substr(1);return $1.toUpperCase()})] = css[j+1]; } } } return this; } window.onload = function(){ var st = new Date().getTime(); for(var i=0;i<10000;i++){ $('#wrap').style("color:#00f; background:#f00; border-left:10px solid #000;"); $('div').style("border-right:10px solid #000; width:100px; height:100px; margin:10px;"); $('.cl').style("border-top:10px solid #000; background:#00f;"); } var end = new Date().getTime(); alert(end-st); } //]]> </script> <title></title> </head> <body> <div id="wrap">aaaaa</div> <div class="cl">bbb</div> <div class="cl">ccc</div> </body> </html> 他にも、もっとこうしたほうが…等ありましたら教えてください。どうか宜しくお願いします。
- 締切済み
- JavaScript
- ラジオボタンの未選択チェックについて
ラジオボタンの未選択チェックに困っています！ フォームにInputして、CGIで送信するように設定しています。 但し、送信内容を管理者がメール受信するため、ラジオボタンの「name」は漢字にしています。 ＜name＞ ＜value＞ Webの見やすさ ＝ 見やすい と表示されるようにです。 <INPUT type="radio" name="Webの見やすさ" value="見やすい" id="Q11"><label for="Q11"> 見やすい</label> <INPUT type="radio" name="Webの見やすさ" value="特に問題ない" id="Q12"><label for="Q12"> 特に問題ない</label> <INPUT type="radio" name="Webの見やすさ" value="ふつう" id="Q13"><label for="Q13"> ふつう</label> <INPUT type="radio" name="Webの見やすさ" value="やや見にくい" id="Q14"><label for="Q14"> やや見にくい</label> <INPUT type="radio" name="Webの見やすさ" value="見にくい" id="Q15"><label for="Q15"> 見にくい</label></TD> この場合、ラジオボタンの未選択チェックは、どのようにしたら いいのでしょうか？ 今までは、「name」を英数にしていたので、下記のようにしていました。 <script language="JavaScript"> <!-- function chk(oj) { if ((oj.Q1[0].checked == false) && (oj.Q1[1].checked == false) && (oj.Q1[2].checked == false) && (oj.Q1[3].checked == false) && (oj.Q1[4].checked == false)) { alert("Ｑ１のボタンが未選択です"); return false ; } else { return true ; } }//--> </script> 初心者のため、何を変えたらいいのか・・・ホームページを調べたのですが分かりませんでした。 「name」が漢字の場合、どのように指示したらいいのか、ぜひぜひご教授願います。 どうぞよろしくお願いいたします。
- 締切済み
- JavaScript
お礼
これ良いですね。完璧っす。凄いですね。 リスト数が多いので、この方法を利用させて頂きます。 どうもありがとうございました。