复选框与文本框的联动效果JS代码如何写|萝卜系统

编程（Programming）是编定程序的中文简称，就是让计算机代码解决某个问题，对某个计算体系规定一定的运算方式，使计算体系按照该计算方式运行，并最终得到相应结果的过程。为了使计算机能够理解（understand）人的意图，人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机，使得计算机能够根据人的指令一步一步去工作，完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。

【实例名称】

复选框和文本框的联动效果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”用来表示当复选框选中时文本框设置为可用，否则为不可用。

【源码下载】

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

使用编程语言写的程序，由于每条指令都对应计算机一个特定的基本动作，所以程序占用内存少、执行效率高。

……

标签:复选框与文本框的联动效果JS代码如何写