チェックボックスがIE８で正しく動作しないのはなぜ

2023/08/16 03:27

このQ&Aのポイント

Internet Explorer 8や7でチェックボックスをクリックしても動作しない問題が発生しています。他のブラウザでは正常に動作しているため、原因を特定する必要があります。
提供されたサンプルコードを使用してテストを行ったところ、チェックボックスをクリックしても動作しないという現象が確認されました。ウインドウ上のどこかをクリックすると正常に動作するため、クリックイベントの発生に関連した問題が考えられます。
JavaScriptの関数`fff()`がチェックボックスの状態を監視し、テーブルの表示を制御していることがわかりました。しかし、この関数がInternet Explorer 8や7では正常に動作しないようです。具体的な原因を特定するためには、より詳細なデバッグが必要です。

ベストアンサー

チェックボックスがIE８で正しく動作しないのはなぜ

2011/12/31 18:20

下記サンプルコードを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>

kiseki777
お礼率80% (211/261)

JavaScript
回答数1
ありがとう数2

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

LancerVII
ベストアンサー率51% (1060/2054)

2011/12/31 18:58 回答No.1

こんにちは。元々onchangeの挙動がIEとFFで違っていたのですがIE9でFF等と同じになったようです。 IE7,IE8について同じ動きをさせるのであればonchangeではなくonclickでイベントを拾えば良いと思います。

質問者

お礼 2011/12/31 20:50

無事に解決しました。有難うございました。

関連するQ&A

複数のチェックボックスをチェックしたい
質問させてください。複数のチェックボックスを項目別に全てチェックするようなjqueryの書き方をご教授いただきたいです。 <table> <tr> <td> <input type="checkbox" name="" />まとめてチェック </td> </tr> <tr> <td> <li><input type="checkbox" name="" value="" />a</li> <li><input type="checkbox" name="" value="" />b</li> <li><input type="checkbox" name="" value="" />c</li> <li><input type="checkbox" name="" value="" />d</li> </td> </tr> <tr> <td> <input type="checkbox" name="" />まとめてチェック </td> </tr> <tr> <td> <li><input type="checkbox" name="" value="" />e</li> <li><input type="checkbox" name="" value="" />f</li> <li><input type="checkbox" name="" value="" />g</li> <li><input type="checkbox" name="" value="" />h</li> </td> </tr> <tr> <td> <input type="checkbox" name="" />まとめてチェック </td> </tr> <tr> <td> <li><input type="checkbox" name="" value="" />i</li> <li><input type="checkbox" name="" value="" />j</li> <li><input type="checkbox" name="" value="" />k</li> <li><input type="checkbox" name="" value="" />l</li> </td> </tr> </table> 上記のようにそれぞれの項目に「まとめてチェック」のチェックボックスがあり、そこに該当するチェック項目は全てチェックorチェックを外すっという挙動の実装を考えています。 jqueryでやりたいのですが、javascript、jqueryがかなり苦手でいまいちいきません。ググって $(function(){ $('#all').click(function(){ if(this.checked){ $('#check input').attr('checked','checked'); }else{ $('#check input').removeAttr('checked'); } }); }); このソースを見つけたのですが、これだと一つの項目でしか実装できず項目分このjqueryを書くのも余り良い書き方だと思えません。どなたか、ご教授お願いいたします。
- ベストアンサー
- JavaScript
チェックボックスのチェック処理
HTMLでボタン押下時にチェックしたいことがあります。 ■カテゴリーA～Cで、カテゴリー毎に選択できるのは一つのみ　(例)「A1・あ」と「A2・お」が選択時はNG ■カテゴリーは最大2つまで選択可能　(例)「A1・い」と「C1・さ」が選択時はOK 　　　「A1・い」と「B2・く」と「C1・さ」が選択時はNG <html> <head> </head><body> <form> <table border="1"> <tr> <td>A1</td> <td><input type="checkbox" name="chk1" value="1">あ</td> </tr> <tr> <td>　</td> <td><input type="checkbox" name="chk1" value="1">い</td> </tr> <tr> <td>　</td> <td><input type="checkbox" name="chk1" value="1">う</td> </tr> <tr> <td>A2</td> <td><input type="checkbox" name="chk1" value="1">え</td> </tr> <tr> <td>　</td> <td><input type="checkbox" name="chk1" value="1">お</td> </tr> <tr> <td>B1</td> <td><input type="checkbox" name="chk1" value="1">か</td> </tr> <tr> <td>B2</td> <td><input type="checkbox" name="chk1" value="1">く</td> </tr> <tr> <td>　</td> <td><input type="checkbox" name="chk1" value="1">け</td> </tr> <tr> <td>C1</td> <td><input type="checkbox" name="chk1" value="1">さ</td> </tr> <tr> <td>C2</td> <td><input type="checkbox" name="chk1" value="1">し</td> </tr> <tr> <td>　</td> <td><input type="checkbox" name="chk1" value="1">す</td> </tr> </table> <input type="submit" value="チェック"> </form> </body> </html> すみませんがよろしくお願いします。
- ベストアンサー
- JavaScript
チェックボックスの無効化、有効化
あるサイトを参考にチェックボックスの無効化、有効化を実装したいと考えています。ソースは以下の通りなのですが、この場合、name属性にそれぞれ異なる番号（t1、t2、t3やc1、c2、c3）が振られている必要がありますが、これを同じnameに統一して動作させるには、どのように記述したらよいのか教えて頂けませんでしょうか？ nameのtとcを統一したいのではなく、t1、t2、t3を番号抜きのtに統一、c1、c2、c3を番号抜きのcに統一したいと思っています。 <script type="text/javascript"> function fchk2(obj, name) { var frm=obj.form; if(obj.checked==true) { /* チェックボックスが選択されている場合は、テキストボックスを有効化（false） */ for(var i=1; i<=3; i++){ frm.elements[name+i].disabled=false; } } else { for(var i=1; i<=3; i++){ /* 無効化する前に、入力値をクリア */ if(name=='t'){ /* テキストボックスの場合 */ frm.elements[name+i].value=""; }else{ /* チェックボックスの場合 */ frm.elements[name+i].checked=false; } /* 無効化（true） */ frm.elements[name+i].disabled=true; } } } </script> <form name="form2" action="#"> <label for="chk1"><input type="checkbox" id="chk1" name="chk1" value="1" onclick="fchk2(this,'t')" checked="checked" />テキストボックスの無効化・有効化を切替（チェックを外すと無効化）</label><br /> <input type="text" name="t1" value="テキストA" size="20" /> <input type="text" name="t2" value="テキストB" size="20" /> <input type="text" name="t3" value="テキストC" size="20" /> <hr /> <label for="chk2"><input type="checkbox" id="chk2" name="chk2" value="1" onclick="fchk2(this,'c')" checked="checked" />チェックボックスの無効化・有効化を切替（チェックを外すと無効化）</label><br /> <input type="checkbox" name="c1" value="1" />選択肢A<br /> <input type="checkbox" name="c2" value="1" />選択肢B<br /> <input type="checkbox" name="c3" value="1" />選択肢C </form>
- ベストアンサー
- JavaScript
チェックボックスの表示・非表示　動作
はじめまして。初めて掲示板を利用させていただきます。javascriptを勉強しまだ日が浅いのでご存知の方がいらっしゃれば教えてください。今、チェックボックスを選択し選択した項目がアクティブになるようにしたいのですが、選択項目が重複すると以下のようになってしまいました。 A+AB＝AB　A+AB+E=ABE　個々までは問題なし。既に全てのチェックが付いた上体で、ABCE－A＝BCE　となってしまい、 ABのチェックが入っていても、Aが消えてしまいます。以下に現在のコードを張ります。 <script type='text/javascript'>  </script> <form name='form2' action='#'> <input type='checkbox' name='chk1' value='1' onclick='fchk2(this,"t")' checked>A<br> <input type='checkbox' name='chk1' value='1' onclick='fchk2(this,"t");fchk2(this,"b");' checked>AとB<br> <input type='checkbox' name='chk1' value='1' onclick='fchk2(this,"t");fchk2(this,"e");' checked>AとE<br> <input type='checkbox' name='chk2' value='1' onclick='fchk2(this,"c");fchk2(this,"e");' checked>CとE<br> <br> A<input type='text' name='t1' value='テキストA'><br> A<input type='text' name='t2' value='テキストB'><br> A<input type='text' name='t3' value='テキストC'><br> <br> B<input type='text' name='b1' value='テキストA'><br> B<input type='text' name='b2' value='テキストB'><br> B<input type='text' name='b3' value='テキストC'><br> <br> <input type='checkbox' name='c1' value='1'> 選択肢C<br> <input type='checkbox' name='c2' value='1'> 選択肢C<br> <input type='checkbox' name='c3' value='1'> 選択肢C<br> <br> <input type='checkbox' name='e1' value='1'> 選択肢E<br> <input type='checkbox' name='e2' value='1'> 選択肢E<br> <input type='checkbox' name='e3' value='1'> 選択肢E </form> よろしくお願いいたします。
- ベストアンサー
- JavaScript
チェックボックスのvalueの取得方法タイプ１と２
質問１　）） select要素の選択されたoption要素のvalueを取得する方法はタイプ１のように専用のものが用意されていますが、チェックボックスの場合もそれ専用のものはありますか？質問２　））タイプ２ではチェックボックスの<input value=～>のvalueを取得することができましたが、タイプ１では取得することができませんでした。正しいと思うのですが、なぜでしょうか。質問３　））タイプ１とタイプ２の目的は同じですが、どちらの書き方の方が良いでしょうか。タイプ２のほうがシンプルで短くよさそうなのですが、多くのサイトではタイプ１を使っているところが多いようです。ちなみに、サンプルでは１つ１つ直接書くやり方をしていますが、実際は配列を使って複数のselect要素やチェックボックスのvalueを取得するつもりです。 <!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></title> </head> <body> <form> <select name="aaa" onchange="cd(this.form)"> <option value="A1"></option> <option value="A2"></option> <option value="A3"></option> </select> <ul id="uli"> <li><input type="checkbox" name="bbb" id="b_1" onchange="cd(this.form)" value="B1" /><label for="b_1"></label></li> <li><input type="checkbox" name="bbb" id="b_2" onchange="cd(this.form)" value="B2" /><label for="b_2"></label></li> <li><input type="checkbox" name="bbb" id="b_3" onchange="cd(this.form)" value="B3" /><label for="b_3"></label></li> </ul> </form> <script type="text/javascript"> //　タイプ１ function cd(r) { var slt = r.elements["aaa"].options[r.elements["aaa"].selectedIndex].value; alert(slt); var chk = document.getElementById('uli').children; for(i=0,len=chk.length; i<len; i++){ if(chk[i].checked == true){ alert(chk[i].nodeValue); } } } //　タイプ２ function cd(r) { var slt = r.aaa.value; alert(slt); var chk = r.bbb; for(i=0,len=chk.length; i<len; i++){ if(chk[i].checked == true){ alert(chk[i].value); } } } </script> </body> </html>
- ベストアンサー
- JavaScript
form で、チェックボックスにまとめてチェック
データベースから、データを持ってきて、複数のグループに分けてまとめてチェックを入れようとしています。複数のチェックボックスがある場合はいいのですが、チェックボックスが一つしかない場合にチェックが入りません。どの様に変更すれば、一つでもチェックが入るようになるでしょうか？以下の様なサンプルコードを見ながら、作成しています。 function AllChecked1(){ var check = document.form.a1.checked; for (var i=0; i<document.form.elements['aa1[]'].length; i++){ document.form.elements['aa1[]'][i].checked = check; } } <form name="form" method="POST" action="select1.php"> <input type="checkbox" name="a1" id="a1" onClick="AllChecked1();" /><label for="a1"> group1 全選択</label> <input type="checkbox" name="aa1[]" id="aa11" value="1" /><label for="aa11">名前1</label><br /> </form> よろしくお願いいたします。
- ベストアンサー
- JavaScript
チェック出来る数を制限&チェックされない場合0
【チェックボックスにチェック出来る数を制限しながら、チェックされない場合には0を入力する】ということが希望です。それぞれを分離させた場合は、下記で可能でした。この2つを同時に満たす方法が分かりません。ご教授頂きたくお願いいたします。【チェックボックスにチェック出来る数を制限する方法】 <SCRIPT language="JavaScript">  </SCRIPT> <input type="checkbox" name="ch1" value="2" onClick="chBx('ch1')"> <label for="type1">1</label> <BR> <input type="checkbox" name="ch2" value="2" onClick="chBx('ch2')"> <label for="type1">2</label> <BR> <input type="checkbox" name="ch3" value="3" onClick="chBx('ch3')"> <label for="type1">3</label> <BR> <input type="checkbox" name="ch4" value="4" onClick="chBx('ch4')"> <label for="type1">4</label> <BR> <input type="checkbox" name="ch5" value="5" onClick="chBx('ch5')"> <label for="type1">5</label> <BR> 【チェックボックスがチェックされない場合に0を入力する】　　<input type="hidden" name="ch1" value="0"> 　　<input type="checkbox" onclick="this.form.ch1.value=this.checked ? 1 : 0"> 　　<input type="hidden" name="ch2" value="0"> 　　<input type="checkbox" onclick="this.form.ch2.value=this.checked ? 1 : 0"> 　　<input type="hidden" name="ch3" value="0"> 　　<input type="checkbox" onclick="this.form.ch3.value=this.checked ? 1 : 0"> 　　<input type="hidden" name="ch4" value="0"> 　　<input type="checkbox" onclick="this.form.ch4.value=this.checked ? 1 : 0"> 　　<input type="hidden" name="ch5" value="0"> 　　<input type="checkbox" onclick="this.form.ch5.value=this.checked ? 1 : 0"> 上記を同時に満たしたいというのが今回の質問の趣旨です。
- ベストアンサー
- JavaScript
複数あるチェックボックスの入力チェックするには？
チェックボックスの入力チェックスクリプトを探しており、下記のようなスクリプトをネット検索で見つけました。  </script> <form method="POST" action="■.cgi" onSubmit="return chNull('チェックボックス',a);"> <input type="checkbox" name="a" value="A1" />A1 <input type="checkbox" name="a" value="A2" />A2 </form> 同じnameのチェックボックス群がひとつしかないときはこれで問題ないのですが、下記のようにnameが複数ある場合にはこのスクリプトのどの部分を変えればよいのでしょうか？ <input type="checkbox" name="a" value="A1" />A1 <input type="checkbox" name="a" value="A2" />A2 <input type="checkbox" name="b" value="B1" />B1 <input type="checkbox" name="b" value="B2" />B2 <input type="checkbox" name="c" value="C1" />C1 <input type="checkbox" name="c" value="C2" />C2 できればこのスクリプトをベースとして使用したいと思っています。どなたかお分かりの方がいらっしゃいましたらお教え下さいませ。よろしくお願い致します。
- ベストアンサー
- JavaScript
ラジオボタンの選択でチェックボックスのON/OFFを連動
ラジオボタンを選択すると、連動してチェックボックスにチェックが入れられる仕組みを作りたいのですが。本番環境ではこの仕組みを3つほど使用したいです。現在ここまでは出来ていますが、2つ・3つとこの仕組みを増やすと、動作が出来なくなってしまいます。さらに、ラジオボタンを選択するたびにチェックボックスのチェックが初期化される仕組みにしたいのですが・・・＞＜どなたか教えて頂けないでしょうか？ <html> <head> <script> window.onload=function(){ document.getElementById("deta1").onclick=function(){ detagroupDisabled(this.form,true); } document.getElementById("deta2").onclick=function(){ detagroupDisabled(this.form,true); } document.getElementById("deta3").onclick=function(){ detagroupDisabled(this.form,false); } } function detagroupDisabled(f,flg){ var objs=f.getElementsByTagName("input"); for(var i=0;i<objs.length;i++){ if(objs[i].className=="detagroup") objs[i].disabled=flg; } } </script> </head> <body> <form action="./postmail.cgi" method="post"> <input type="radio" name="FPCデータ" id="deta3" value="アリ"><label for="deta3">アリ</label> <input type="checkbox" name="FPCデータアリ" id="DXF" class="detagroup" value="DXF" disabled><label for="DXF">DXF</label> <input type="checkbox" name="FPCデータアリ" id="ガーバ" class="detagroup" value="ガーバ" disabled><label for="ガーバ">ガーバ</label> <input type="checkbox" name="FPCデータアリ" id="PDF" class="detagroup" value="PDF" disabled><label for="PDF">PDF</label> <input type="radio" name="FPCデータ" id="deta1" value="ナシ" checked><label for="deta1">ナシ</label> <input type="radio" name="FPCデータ" id="deta2" value="アリ"><label for="deta2">相談</label><br><br> <input type="radio" name="補強板" value="ナシ" checked="checked">ナシ <input type="radio" name="補強板" value="アリ">アリ <input type="checkbox" name="補強板" value="ポリイミド">ポリイミド <input type="checkbox" name="補強板" value="ポリエステル">ポリエステル <input type="checkbox" name="補強板" value="ガラエポ">ガラエポ <input type="checkbox" name="補強板" value="相談">相談<br><br> <input type="radio" name="印刷" value="ナシ" checked="checked">ナシ <input type="radio" name="印刷" value="アリ">アリ <input type="checkbox" name="印刷" value="銀シールド">銀シールド <input type="checkbox" name="印刷" value="銀ペースト">銀ペースト <input type="checkbox" name="印刷" value="銅ペースト"> 銅ペースト <input type="checkbox" name="印刷" value="シルク">シルク色 <SELECT NAME="印刷"> <OPTION SELECTED VALUE="---">--- <OPTION VALUE="白">白 <OPTION VALUE="黒">黒 <OPTION VALUE="他">他 </SELECT> 　 </form> </body> </html>
- 締切済み
- JavaScript
チェックボックス　とラジオボタンの値取得について
チェックボックス　とラジオボタンの値取得についてこんにちはチェックボックスの中にラジオボタンがある場合にチェックボックスの値に続けてラジオボタンの値を表示したいのですが、うまくいかず悩んでいます。【やりたいこと】 □そのた２をチェクして男性を選択した場合　「そのた２男性」と表示したい。例そのた１そのた２男性そのた４そのた５女性サンプルのチェックボックスのlabelタグをはずすと $(vals[i]).next($("input[name='radio']:checked").val()); で値を取得できたのですが、 labelタグを付けたまま値を取得することは可能でしょうか？ labelタグをつけたまま、 $(vals[i]).find($("input[name='radio']:checked").val()); でやってみたのですが、undefindがでてしまいました。サンプルではチェックボックスの数は１個ですが、 □が３０個以上　のチェックボックスが５０個くらいあるので、１回の記述で済ませたいのですが、ラジオボタンが隣にあったら値を取得する　のようにできるのでしょうか？何かよい方法があれば教えて頂けないでしょうか。よろしくお願い致します。 ■サンプルソース <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <script type="text/javascript" language="JavaScript"></script> <script language="javascript">  </script> <title></title> </head> <body> <form name="f"> <div>アンケート<br> <label for="1"><input type="checkbox" name="q1" class="chex" id="1" value="その1"> その1</label><br> <label for="2"><input type="checkbox" name="q1" class="chex" id="2" value="その2"> その2</label> <input type="radio" name="radio1" value="可">男性 <input type="radio" name="radio1" value="否">女性 <br> <label for="3"><input type="checkbox" name="q1" class="chex" id="3" value="その3"> その3</label><br> <label for="4"><input type="checkbox" name="q1" class="chex" id="4" value="その4"> その4</label><br> <label for="5"><input type="checkbox" name="q1" class="chex" id="5" value="その5"> その5</label> <input type="radio" name="radio2" value="可">男性 <input type="radio" name="radio2" value="否">女性 <br> </div> <input type="button" value="確認" onclick="textb()"> <input type="reset" value="クリア"> <br> <textarea name="log" rows="4" cols="50"></textarea></form> </body> </html>
- ベストアンサー
- JavaScript