单选框的选中事件,文本框的不可写
选中了单选按钮后,后面的文本框就可编辑,如果没有选中单选按钮,那么后面的文本框不可编辑。如下图:
![](http://hiphotos.baidu.com/atmo/pic/item/2c637bc7a2f80adbd000601d.jpg)
此为选中状态
![](http://hiphotos.baidu.com/atmo/pic/item/cb8794076b3c14ca7a89471e.jpg)
此为没有选中状态
一开始js函数的思路:响应单选框的单击事件
总结:虽然鼠标选中和单击事件是同样的操作,但是单击事件和选中完全是两回事。
![](http://hiphotos.baidu.com/atmo/pic/item/2c637bc7a2f80adbd000601d.jpg)
此为选中状态
![](http://hiphotos.baidu.com/atmo/pic/item/cb8794076b3c14ca7a89471e.jpg)
此为没有选中状态
一开始js函数的思路:响应单选框的单击事件
如果单选是选中的
那么让文本框可编辑
否则
文本框不可编辑
这样看来几乎没什么错误,实际上犯了大错误,运行的时候会出现单选框不能被选中或者无法清空单选框,因为单选框的onclick事件并不会选中或者不选中单选框。所以每次单击后必须修改单选框的状态。
<script language="javascript">
function stuYN()
{
if(document.getElementById("sf").checked==false) //判断单选框此时状态为未选
{
document.getElementById("sf").checked=true; //改变状态
document.getElementById("stuN").readOnly=false;// 文本框可编辑
}
else //判断单选框此时状态为已选
{
document.getElementById("sf").checked=false;//改变状态
document.getElementById("stuN").readOnly=true;// 文本框可编辑
}
}
</script>
<form name="form1" action="aa.asp" >
<input type="radio" id="sf" onclick="stuYN()" >
<input type="text" id="stuN" >
</form>
function stuYN()
{
if(document.getElementById("sf").checked==false) //判断单选框此时状态为未选
{
document.getElementById("sf").checked=true; //改变状态
document.getElementById("stuN").readOnly=false;// 文本框可编辑
}
else //判断单选框此时状态为已选
{
document.getElementById("sf").checked=false;//改变状态
document.getElementById("stuN").readOnly=true;// 文本框可编辑
}
}
</script>
<form name="form1" action="aa.asp" >
<input type="radio" id="sf" onclick="stuYN()" >
<input type="text" id="stuN" >
</form>
总结:虽然鼠标选中和单击事件是同样的操作,但是单击事件和选中完全是两回事。