轉自：http://www.cnblogs.com/net205/archive/2008/08/31/1280432.html
前幾天開(kāi)發(fā)中用Javascript腳本創(chuàng )建Checkbox時(shí)，發(fā)現設置checked屬性有問(wèn)題，后來(lái)測試得到設置checked屬性在IE,Firefox,Opera中存在差異。
我們先來(lái)看一下網(wǎng)上搜索到的例子。
1、Internet Explorer 6 and the checked checkbox
http://claudio.cicali.org/article/90/ie-6-and-the-checked-checkbox
You dinamically create a checkbox and then put its state to
checked. Then, you append your new checkbox to its parent. In firefox
there’s nothing wrong with that. But Internet Explorer DOES NOT check
the box. Why? Well, FIRST you have to show the checkbox and THEN check
it.
So:
- chk = document.createElement('INPUT')
- chk.type='checkbox'
- chk.checked=true
- document.getElementById('container').appendChild(chk)
chk = document.createElement('INPUT')
chk.type='checkbox'
chk.checked=true
document.getElementById('container').appendChild(chk)
Does not work in IE. You have to rewrite this as:
- chk = document.createElement('INPUT')
- chk.type='checkbox'
- document.getElementById('container').appendChild(chk)
- chk.checked=true
chk = document.createElement('INPUT')
chk.type='checkbox'
document.getElementById('container').appendChild(chk)
chk.checked=true
從這里我們可以看出在IE中，checked屬性需要在添加到頁(yè)面以后設置才有效，而FF,Opera都不存在此現象。
2、firefox和ie下面的初始化checkbox
http://www.cnblogs.com/sxlfybb/archive/2008/03/20/1114242.html
這篇日志得出同樣的結果。(申明：firefox下是支持cb.checked=true這樣的寫(xiě)法，checked是一個(gè)可讀寫(xiě)的屬性。至少我的環(huán)境是正常的。)
3、使用CheckBox的indeterminate屬性的問(wèn)題
http://blog.csdn.net/yangdengfeng2003/archive/2007/05/05/1597399.aspx
這篇日志提到了CheckBox的indeterminate屬性的問(wèn)題，注意：CheckBox的indeterminate是一個(gè)獨立的
屬性，和CheckBox的checked、status的取值無(wú)關(guān)，也就是說(shuō)它只會(huì )影響CheckBox的外觀(guān)顯示，我們仍然可以正常的使用腳本讀取
checked和status的值。
4、DOM & checkbox(checked status)
http://forums.microsoft.com/MSDN/ShowPost.aspx?PostID=842144&SiteID=1
帖子中提到Checkbox在IE6和IE7下的多種情況。（此帖子中的代碼本人沒(méi)有測試過(guò)。）
最后看看本人測試結果及結論：
- 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- 2 <html xmlns="http://www.w3.org/1999/xhtml">
- 3 <head>
- 4 <title>CheckBox Example</title>
- 5 <meta name="generator" content="editplus" />
- 6 <meta name="author" content="Net205" />
- 7 <meta name="keywords" content="Net205,冷風(fēng)工作室" />
- 8 <meta name="description" content="CheckBox Example in IE、FF、OP" />
- 9 <meta http-equiv='Cache-Control' content='no-cache'/>
- 10 </head>
- 11
- 12 <body>
- 13 <%
- 14 Response.Buffer = true
- 15 Response.Expires = 0
- 16 Response.ExpiresAbsolute = Now() - 1
- 17 Response.CacheControl = "no-cache"
- 18 Response.AddHeader "Pragma", "No-Cache"
- 19
- 20 For Each e In Request.Form
- 21 Response.Write e & " : " & Request.Form(e) & "<br />"
- 22 Next
- 23
- 24 %>
- 25 <form id="frm" name="frm" method="post" action="?">
- 26 <input type="checkbox" id="chkTest1" name="chkTest1" value="1" />
- 27 <script>
- 28 /*you can use setAttribute to set the value of attribute,like this:
- 29 chk.setAttribute("name", "chkTest2")，chk.setAttribute("checked", true)*/
- 30 var chk1 = document.createElement('input');
- 31 chk1.id = "chkTest2";
- 32 chk1.name = "chkTest2";
- 33 chk1.type = "checkbox";
- 34 chk1.value = "1";
- 35 //chk1.defaultChecked=true;
- 36 //chk1.indeterminate = true;
- 37 document.getElementById('frm').appendChild(chk1);
- 38 chk1.checked=true;
- 39 </script>
- 40 <input type="submit" />
- 41 </form>
- 42 </body>
- 43 </html>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>CheckBox Example</title>
5 <meta name="generator" content="editplus" />
6 <meta name="author" content="Net205" />
7 <meta name="keywords" content="Net205,冷風(fēng)工作室" />
8 <meta name="description" content="CheckBox Example in IE、FF、OP" />
9 <meta http-equiv='Cache-Control' content='no-cache'/>
10 </head>
11
12 <body>
13 <%
14 Response.Buffer = true
15 Response.Expires = 0
16 Response.ExpiresAbsolute = Now() - 1
17 Response.CacheControl = "no-cache"
18 Response.AddHeader "Pragma", "No-Cache"
19
20 For Each e In Request.Form
21 Response.Write e & " : " & Request.Form(e) & "<br />"
22 Next
23
24 %>
25 <form id="frm" name="frm" method="post" action="?">
26 <input type="checkbox" id="chkTest1" name="chkTest1" value="1" />
27 <script>
28 /*you can use setAttribute to set the value of attribute,like this:
29 chk.setAttribute("name", "chkTest2")，chk.setAttribute("checked", true)*/
30 var chk1 = document.createElement('input');
31 chk1.id = "chkTest2";
32 chk1.name = "chkTest2";
33 chk1.type = "checkbox";
34 chk1.value = "1";
35 //chk1.defaultChecked=true;
36 //chk1.indeterminate = true;
37 document.getElementById('frm').appendChild(chk1);
38 chk1.checked=true;
39 </script>
40 <input type="submit" />
41 </form>
42 </body>
43 </html>
結論：
1、當用Javascript腳本創(chuàng )建并添加CheckBox復選框時(shí)，對于IE，必須在添加(如：appendChild)后設置checked值才有效，FF、OP都有效，無(wú)此現象。
2、defaultChecked直接寫(xiě)到屬性里，IE、FF、OP都不支持，當用Javascript腳本設置為true時(shí)，都支持(無(wú)順序關(guān)系)，并在服務(wù)器端可以取到值。
3、indeterminate當屬性添加時(shí)IE、FF、OP都無(wú)效，只有當用Javascript腳本設置時(shí)，IE才有效，并在服務(wù)器端取不到值，只會(huì )影響CheckBox的外觀(guān)顯示。
4、當用setAttribute設置checked值時(shí)，如果為unchecked狀態(tài)，對于FF、OP則不需要設置任何值，就算設置為fasle、"false"或""(空字符串)，checkbox都為選中狀態(tài)。
5、類(lèi)似document.createElement("<input type=checkbox>");創(chuàng )建元素時(shí)，只有IE才有效。
說(shuō)明：本人測試環(huán)境為IE6.0 sp2、Firefox 3.0.1、Opera 9.52，如有其他情況，請各位同仁指出。
