使用createElement()创建checkbox不能设置name属性

最新推荐文章于 2024-08-05 11:53:50 发布

mydeman

最新推荐文章于 2024-08-05 11:53:50 发布

阅读量4.7k

点赞数

分类专栏： JavaScript Web开发文章标签： button javascript input internet firefox include

本文链接：https://blog.csdn.net/mydeman/article/details/2754864

版权

Web开发同时被 2 个专栏收录

82 篇文章 0 订阅

订阅专栏

JavaScript

43 篇文章 0 订阅

订阅专栏

今天在使用document.createElement()动态创建复选框时，发现不能为其name赋值，以下是测试代码：

 
 <html>
  <head>
    <title>Test</title>
  </head>
  <body>
     <div id="testDiv"></div>
     <input type="button" onclick="addInput()" value="Test0">
     <input type="button" onclick="show()" value="Test1">
     <script language="javascript">
       function addInput(){
        var div = document.getElementById("testDiv");
         for(var ii = 0; ii < 5; ii++){
           var check = document.createElement("input");
           check.type = "checkbox";
           check.id = "chk_" + ii;
           check.name = "chkGroup";
           div.appendChild(check);
         }
         alert(div.innerHTML);
       }
       
       function show(){
        alert(document.getElementsByName("chkGroup").length);
       }
    </script>
  </body>
</html>
 

       其中check.name = "chkGroup"这句话并不能起到预期的作用，无论是看生成后的HTML代码还是观察使用document.getElementsByName()获取的数组长度，都会发现这个name设置并没有起作用。当然这种情况只出现在IE6和IE7中，而在FireFox中是没有问题的。
      当然解决方法很简单，在创建时，使用document.createElement("<input name='chkGroup'>")。不过还不知道是什么原因？
      在Name属性的说明中有这样一句话：

In Internet Explorer 5, the name property cannot be set at run time on anchor objects dynamically created with the createElement method. To create an anchor with a NAME attribute, include the attribute and value when using the createElement method, or use the innerHTML property.