作者iambonnie ( )
看板Web_Design
標題[問題] checkbox效果無法表現於IE
時間Tue Oct 30 14:44:42 2007
目的：改變checkBox勾選狀態 即改變顏色的效果
作法：checkBox搭配table使用 每個cell放一個checkBox
預先用一個陣列存選取狀態
pre[]
當發生onClick()時呼叫js 並用另一陣列存目前選取狀態
checkItem｝[]
比較兩陣列內容 再做顏色處理
問題：在Firefox可以正常顯示 但在IE上卻沒有效果
我用alert去檢查 發現在陣列比對的時候
只能偵測到第一個checkBox勾選狀態改變 後面兩個都無效
且即使第一個checkBox可以被判斷 但後續的顏色處理卻沒有出現效果
請問我該如何改寫 才能讓兩種瀏覽器都可以跑出我要的？謝謝
附上我的程式碼：(放在<body>底下)
<form name="FormA">
<table name=tb1>
<tr><td
name="cell">
<input type=checkbox name= "books" value="JavaScript"
onclick="show();">
JavaScript</td></tr>
<tr><td
name="cell">
<input type=checkbox name= "books" value="Html" checked="true"
onclick="show();">
Html</td></tr>
<tr><td
name="cell">
<input type=checkbox name= "books" value="XML" checked="true"
onclick="show();">
XML</td></tr>
</table>
</form>
<script type="text/javascript">
<!--
var obj=document.FormA.books;
var len = obj.length;
var pre= new Array();
//boolean array
for(var i=0;i<len;i++){
//儲存預設狀態
pre[i]=obj[i].checked;
//alert("pre["+i+"] checked is "+pre[i]);
}
function show(){
var checkItem= new Array();
//boolean array
var a= document.getElementsByName('cell');
//checkBox所在欄位集合
for (var i=0;i<len;i++){ /
/目前選項狀態
checkItem[i]=obj[i].checked;
//alert("checkItem["+i+"] checked is "+checkItem[i]);
if (pre[i]!=checkItem[i]){
alert(obj[i].value +" is changed.");
//顯示哪些選項被改了 可註解掉
a[i].style.backgroundColor="D6F4BA";
//改表格欄位的背景色
}
else{
a[i].style.backgroundColor="#ffffff";
}
}
//end for
}
//end show()
//-->
</script>
--
一個人缺乏什麼，會反映在他對書籍的評價上。
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 59.124.142.183
1F：推 blackbing:請愛用document.getElementById 10/31 09:44
2F：推 blackbing:如果只是要做到這樣的效果好像有點繞太遠了 10/31 09:50
3F：→ grence:我的IE告訴我沒有style屬性 囧a 11/01 01:08
4F：推 iambonnie:要跟很多預設值比較 所以用陣列 用id取是指obj那部分嗎? 11/01 13:10
5F：→ iambonnie:喔喔 那我再把style改成其它方式 11/01 13:11