复选框和文本框的联动效果

2012/11/1 11:19:45作者：佚名来源：网络

移动端

【实例名称】

复选框和文本框的联动效果JS代码怎么写

【实例描述】

所谓联动效果就是一个控件不能用时，另一个控件也不能用。本例学习复选框和文本框的联动效果。当复选框没被选中时，文本框处于不可用状态。

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页-学无忧（www.xue51.com）</title>
<script language="javascript">
function chk(obj,txtIndex)
{
 var tmpInput = document.getElementsByName("textfield")[txtIndex]; 
//获取指定的文本框
 obj.checked?tmpInput.disabled=false:tmpInput.disabled=true;   
      //判断文本框是否处于选中状态
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <input name="che" type="checkbox" value="" onclick="chk(this,'0')"/>
  <input type="text" name="textfield" disabled=true /><BR/>
  <input name="che" type="checkbox" value="" onclick="chk(this,'1')"/>
  <input type="text" name="textfield" disabled=true /><BR/>
  <input name="che" type="checkbox" value="" onclick="chk(this,'2')"/>
  <input type="text" name="textfield" disabled=true /><BR/>
</form>
</body>
</html>

【运行效果】

运行效果

【难点剖析】

设置文本框是否可用的属性是“disabled”，其值为“true”表示不可用，为“false”表示可用。在“chk”方法中，使用“obj”获取页面中所有的文本框，通过第二个参数“txtIndex”判断当前应该对应哪个文本框：三元运算符“表达式?值1：值2”用来表示当复选框选中时文本框设置为可用，否则为不可用。

【源码下载】

如果你不愿复制代码及提高代码准确性，你可以点击：复选框和文本框的联动效果进行本实例源码下载

标签：复选框文本框