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

最新推荐文章于 2023-05-01 21:50:31 发布

最新推荐文章于 2023-05-01 21:50:31 发布 · 127 阅读

文章标签：

#Firefox #JavaScript #HTML #ViewUI

本文探讨了在Internet Explorer 6和7中使用document.createElement()方法动态创建复选框时遇到的问题——无法正确设置复选框的name属性。此问题在Firefox浏览器中不存在，并提供了一种解决方案。

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

<html>

<head>

<title>Test</title>

</head>

<body>

<divid="testDiv"></div>

<inputtype="button"onclick="addInput()"value="Test0">

<inputtype="button"onclick="show()"value="Test1">

<scriptlanguage="javascript">
functionaddInput(){

vardiv=document.getElementById("testDiv");

for(varii=0;ii<5;ii++){

varcheck=document.createElement("input");

check.type="checkbox";

check.id="chk_"+ii;

check.name="chkGroup";
div.appendChild(check);
}
alert(div.innerHTML);
}
functionshow(){
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.