※ ChatGPTを利用し、要約された質問です（原文：チェックボックスがIE８で正しく動作しないのはなぜ）
チェックボックスがIE８で正しく動作しないのはなぜ
このQ&Aのポイント
Internet Explorer 8や7でチェックボックスをクリックしても動作しない問題が発生しています。他のブラウザでは正常に動作しているため、原因を特定する必要があります。
提供されたサンプルコードを使用してテストを行ったところ、チェックボックスをクリックしても動作しないという現象が確認されました。ウインドウ上のどこかをクリックすると正常に動作するため、クリックイベントの発生に関連した問題が考えられます。
JavaScriptの関数`fff()`がチェックボックスの状態を監視し、テーブルの表示を制御していることがわかりました。しかし、この関数がInternet Explorer 8や7では正常に動作しないようです。具体的な原因を特定するためには、より詳細なデバッグが必要です。
チェックボックスが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>
お礼
無事に解決しました。有難うございました。