<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>单选按钮CSS样式处理效果</title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function()
{
labels = document.getElementById('male').getElementsByTagName('label')
radios = document.getElementById('male').getElementsByTagName('input')
for(i=0,j=labels.length i<j i++)
{
labels[i].onclick=function()
{
if(this.className == '') {
for(k=0,l=labels.length k<l k++)
{
labels[k].className=''
radios[k].checked = false
}
this.className='checked'
try{
document.getElementById(this.name).checked = true
} catch (e) {}
}
}
}
}
var male_obj = {'male':'男', 'female':'女','nomale':'人妖'}
function checkform(obj) {
for (i = 0i <obj.sex.lengthi++) {
if (obj.sex[i].checked) {
alert(male_obj[obj.sex[i].value])
var show_msg = document.getElementById("show_msg")
show_msg.value = male_obj[obj.sex[i].value]
}
}
return false
}
</script>
</head>
<body>
<form name="reg" onsubmit="return checkform(this)">
<table border="0">
<tr>
<td><span style="line-height:15px">请选择你的性别：</span></td>
<td width="200" id="male">
<input type="radio" id="sex_male" checked="checked" name="sex" value="male" /><label name="sex_male" class="checked" for="sex_male">男</label>
<input type="radio" id="sex_female" name="sex" value="female" /><label name="sex_female" for="sex_female">女</label>
<input type="radio" id="sex_nomale" name="sex" value="nomale" /><label name="sex_nomale" for="sex_nomale">人妖</label></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="Submit" value="提交" id="Submit" /></td>
</tr>
<tr><td><input type="text" id="show_msg"></td></tr>
</table>
</form>
</body>
</html>
可以输入这串代码试试:<input type="radio" value="123" name="theRadio" id="111">
<label for="111">123</label>
这个问题普遍存在，但是不同情况解决办法不一样，你先试下这个，有时候记得必须绑定id，有时候不需要绑定id，具体事情具体分析吧。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）