<!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>
IE下添加input radio 时,一定要指定name,否着radio框无法选中
最新推荐文章于 2021-06-19 12:15:28 发布