zoukankan      html  css  js  c++  java
  • Checkbox的checked属性问题

      前几天开发中用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,如有其他情况,请各位同仁指出。 

  • 相关阅读:
    Vue里用moment.js
    回到顶部|回到底部功能的实现(Vue)
    Vue绑定下拉框型的树
    Excel导入数据库前后端代码
    Windows应用程序开发笔记-控制和获取其他程序窗口控件内容
    SQL Server查询、添加、修改表和字段的备注描述
    windows 共享文件夹,和共享打印机
    Visual Studio 2015安装过程卡住,解决办法
    python绘图 初识Python绘图
    GCC、LLVM、Clang
  • 原文地址:https://www.cnblogs.com/net205/p/1280432.html
Copyright © 2011-2022 走看看