当前位置:萝卜系统下载站 > 技术开发教程 > 详细页面

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

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

更新时间:2023-06-20 文章作者:未知 信息来源:网络 阅读次数:

编程(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”用来表示当复选框选中时文本框设置为可用,否则为不可用。

【源码下载】

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


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

温馨提示:喜欢本站的话,请收藏一下本站!

本类教程下载

系统下载排行

网站地图xml | 网站地图html