Checkbox的checked属性问题

jusescn

浏览: 125826 次
性别:
来自: 北京

最近访客更多访客>>

tianfeng701

afu

sakurakann

windelk

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax

IE Flash Firefox JavaScript Opera

前几天开发中用Javascript脚本创建Checkbox时，发现设置checked属性有问题，后来测试得到设置checked属性在IE,Firefox,Opera中存在差异。

　　我们先来看一下网上搜索到的例子。

　　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:　　

<!---->1     chk = document.createElement('INPUT')
2     chk.type='checkbox'
3     chk.checked=true
4     document.getElementById('container').appendChild(chk)

Does not work in IE. You have to rewrite this as:

<!---->1     chk = document.createElement('INPUT')
2     chk.type='checkbox'
3     document.getElementById('container').appendChild(chk)
4     chk.checked=true

　　从这里我们可以看出在IE中，checked属性需要在添加到页面以后设置才有效，而FF,Opera都不存在此现象。

　　2、firefox和ie下面的初始化checkbox
　　　http://www.cnblogs.com/sxlfybb/archive/2008/03/20/1114242.html

　　　这篇日志得出同样的结果。(申明：firefox下是支持cb.checked=true这样的写法，checked是一个可读写的属性。至少我的环境是正常的。)

　　3、使用CheckBox的indeterminate属性的问题

　　　http://blog.csdn.net/yangdengfeng2003/archive/2007/05/05/1597399.aspx

　　　这篇日志提到了CheckBox的indeterminate属性的问题，注意：CheckBox的indeterminate是一个独立的属性，和CheckBox的checked、status的取值无关，也就是说它只会影响CheckBox的外观显示，我们仍然可以正常的使用脚本读取checked和status的值。

　　4、DOM & checkbox(checked status)

　　　http://forums.microsoft.com/MSDN/ShowPost.aspx?PostID=842144&SiteID=1

帖子中提到Checkbox在IE6和IE7下的多种情况。（此帖子中的代码本人没有测试过。）

　　　最后看看本人测试结果及结论：

　　　Code

<!----> 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,冷风工作室" />
 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脚本创建并添加CheckBox复选框时，对于IE，必须在添加(如：appendChild)后设置checked值才有效，FF、OP都有效，无此现象。
　　　2、defaultChecked直接写到属性里，IE、FF、OP都不支持，当用Javascript脚本设置为true时，都支持(无顺序关系)，并在服务器端可以取到值。
　　　3、indeterminate当属性添加时IE、FF、OP都无效，只有当用Javascript脚本设置时，IE才有效，并在服务器端取不到值，只会影响CheckBox的外观显示。
　　　4、当用setAttribute设置checked值时，如果为unchecked状态，对于FF、OP则不需要设置任何值，就算设置为fasle、"false"或""(空字符串)，checkbox都为选中状态。

　　　5、类似document.createElement("<input type=checkbox>");创建元素时，只有IE才有效。

　　　说明：本人测试环境为IE6.0 sp2、Firefox 3.0.1、Opera 9.52，如有其他情况，请各位同仁指出。

分享到：