动态生成单选框
前段时间重构公司项目，遇到一个需求，要在浏览器中动态生成单选框，经过一番折腾，终于修成正果，现在项目上线了，终于有时间分享出来
基本需求：跨浏览器生成单选框并且能够添加事件回调
实现原理：通过调用document的createElement方法生成单选框，并添加到DOM树中
实现时遇到的问题：
1. IE6下的单选框name属性为只读，只能在构造时设置
2. IE6下选中状态需要加入到DOM树后才能设置
具体实现：
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>
<
html
>
<
head
>
<
script
type
="text/javascript"
>
/*
作者：Ryan.Sun
日期：2011/04/24
用途：跨浏览器动态生成单选框，不依赖外部框架，支持添加自定义的点击事件回调
历史：
2011/04/24 完成基本功能代码并在IE6、IE9、FF和Chrome测试通过
2011/04/25 增加选中状态赋值
2011/04/26 优化实现同时增加测试用例
*/
function
addRadioButton(radio){
//
校验参数
if
(radio.element
==
null
||
radio.name
==
null
||
radio.value
==
null
||
(radio.onclick
!=
null
&&
typeof
radio.onclick
!=
"
function
"
)){
throw
new
Error(
"
ErrorArgument
"
);
}
var
options
=
{
element : radio.element,
name : radio.name,
id : radio.id
==
null
?
""
: radio.id,
value : radio.value,
checked : radio.checked
==
null
||
!
radio.checked
?
false
:
true
,
onclick : radio.onclick
==
null
?
function
(){} : radio.onclick,
css : radio.css
==
null
?
""
: radio.css
};
//
声明内部函数
function
addEvent(obj,type,fn){
if
(obj.addEventListener) obj.addEventListener(type,fn,
false
);
else
if
(obj.attachEvent){
obj[
"
e
"
+
type
+
fn]
=
fn;
obj[type
+
fn]
=
function
(){obj[
"
e
"
+
type
+
fn](window.event);}
obj.attachEvent(
"
on
"
+
type,obj[type
+
fn]);
}
}
//
动态生成单选框
var
strInput
=
""
;
if
(navigator.userAgent.indexOf(
"
MSIE 6.0
"
)
>
0
) {
//
Tip: IE6下单选框的name属性为只读，需要这样动态构建单选框
strInput
=
"
<input name='
"
+
options.name
+
"
'>
"
;
}
else
{
strInput
=
"
input
"
;
}
var
op
=
document.createElement(strInput);
op.type
=
"
radio
"
;
op.name
=
options.name;
op.id
=
options.id;
op.value
=
options.value;
op.className
=
options.css;
addEvent(op,
"
click
"
,
function
(){
options.onclick.call(
this
);
});
//
添加到DOM树
radio.element.appendChild(op);
//
设置选中
//
Tip: IE6下需要在单选框添加到DOM树后设置选中状态
op.checked
=
options.checked;
}
//
测试方法
function
Add(){
var
region
=
document.getElementById(
"
add
"
);
addRadioButton({
element : region,
name :
"
new
"
,
id :
"
new
"
,
value :
0
,
checked :
false
,
onclick :
function
(){
alert(
this
.value);
}
});
addRadioButton({
element : region,
name :
"
new
"
,
id :
"
new
"
,
value :
1
,
checked :
true
,
onclick :
function
(){
alert(
this
.value);
}
});
addRadioButton({
element : region,
name :
"
new
"
,
id :
"
new
"
,
value :
2
,
checked :
false
});
addRadioButton({
element : region,
name :
"
new
"
,
value :
4
,
checked :
false
});
addRadioButton({
element : region,
name :
"
new
"
,
value :
5
});
addRadioButton({
element : region,
name :
"
new
"
,
value :
6
,
css :
"
test
"
});
}
</
script
>
<
style
type
="text/css"
>
.test
{
background
:
yellow
;
}
</
style
>
</
head
>
<
body
>
<
input
type
="button"
name
="btnAddRadio"
id
="btnAddRadio"
value
="AddRadio"
onclick
="Add()"
/>
<
div
id
="add"
>
</
div
>
</
body
>
</
html
>