IE下添加input radio 时，一定要指定name,否着radio框无法选中

最新推荐文章于 2020-07-17 18:50:38 发布

wangsong76

最新推荐文章于 2020-07-17 18:50:38 发布

阅读量350

点赞数

分类专栏： jquery 文章标签： IE Firefox HTML XHTML

jquery 专栏收录该内容

8 篇文章

订阅专栏

本文通过两个实验对比了在Internet Explorer浏览器中为动态添加的Radio按钮指定Name属性的重要性。在Firefox等现代浏览器中，两种方式都能正常工作，但在IE下，若未在添加时直接设置Name属性，则Radio按钮可能无法正常选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

           
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>IE 下 radio 添加时name值的重要性</title>
<script language="javascript" src="jquery-1.2.6.js"></script>
<script language="javascript">
$(function(){
	// 添加时指定name
	$("#test1").append('<br/><input id="t1_r1"  type="radio" name="radio1"/>选项1');
	$("#test1").append('<br/><input id="t1_r2"  type="radio" name="radio1"/>选项1');
	//添加后指定name
	$("#test2").append('<br/><input id="t2_r1"  type="radio" />选项1');
	$("#test2").append('<br/><input id="t2_r2"  type="radio" />选项1');
	$("#t2_r1,#t2_r2").attr("name","radio2");
}); 
</script>
</head>

<body>
IE 下 radio 添加时要指定 name值。
FireFox 测试1和测试2的效果是一样的。
<div id="test1">测试1：添加时指定name</div>
<input type="button" onclick="alert($('#test1').html())" value="获取测试1 HTML代码" />
<input type="button" onclick="alert($('#t1_r1').attr('name'))" value="获取测试1 选项1的NAME值" />
<input type="button" onclick="alert($('#t1_r2').attr('name'))" value="获取测试1 选项2的NAME值" />
<br />
<hr />
<div id="test2">测试2：添加后指定name, radio框无法被选中</div>
<input type="button" onclick="alert($('#test2').html())" value="获取测试2 HTML代码" />
<input type="button" onclick="alert($('#t2_r1').attr('name'))" value="获取测试2 选项1的NAME值" />
<input type="button" onclick="alert($('#t2_r2').attr('name'))" value="获取测试2 选项2的NAME值" />
<p>在IE下你会奇怪的发现，通过$('#test2').html() 获取的HTML代码中，没有NAME属性，
但是通过$('#t2_r1').attr('name')却能看见radio</p>
</body>
</html>