通过JS,选取radio时显示/隐藏table的功能
2014-09-10 00:00
435 查看
<html> <head> <meta http-equiv="content-type" content="text/html ; charset=utf-8"/> <script language="javascript"> function selType(value){ //window.alert("你点钟"+value); if(value=='jisuan'){ table1.style.display="block"; table2.style.display="none"; table3.style.display="none"; }else if(value=='jux'){ table2.style.display="block"; table1.style.display="none"; table3.style.display="none"; }else if(value=='area'){ //window.alert("OK"); table3.style.display="block"; table1.style.display="none"; table2.style.display="none"; } } </script> </head> <body> <form action="funcjsq.php" method="post"> <input type="radio" name="sel" value="aa" onclick="selType('jisuan')">四则运算 <input type="radio" name="sel" value="bb" onclick="selType('jux')">计算矩形 <input type="radio" name="sel" value="cc" onclick="selType('area')">计算圆形 <table id="table1" style="display:block" border="1px" bgcolor="#006699" > <tr><td>第一个数</td><td><input type="text" name="num1" ></td></tr> <tr><td>第二个数</td><td><input type="text" name="num2"></td></tr> <tr><td colspan="2"><select name="oper"> <option>+</option> <option>-</option> <option>*</option> <option>\</option> </select></td></tr> <tr ><td colspan="2"><input type="submit" value="计算结果" color="red"></td></tr> </table> <table id="table2" style="display:none" border="1px" bgcolor="#00cc33"/> <tr><td>长</td><td><input type="text" name="side1"></td><tr> <tr><td>宽</td><td><input type="text" name="side2"></td><tr> <tr><td colspan="2"><input type="submit" value="计算结果" name="jux"></td></tr> </table> <table id="table3" style="display:none" bgcolor="#999933"> <tr><td>半径</td><td><input type="text" name="radius"></td></tr> <tr><td><input type="submit" value="圆面积" name="area"/></td></tr> </table> </form> </body> </html>
点击四则运算 矩形面积 圆面积 三个选项可以通过一段JS代码来实现这种效果,代码如上所示。
各个table之间通过一个ID号来区分 radio可以通过添加一个onclick事件selType()传递一个值,在JS中判断值是多少,从而来识别该打开哪个table
如果想达到上图显示的效果还需要将display:none 值改变,可以通过table1.style.display=" block/none"来改变表单是否显示出来是否显示。
对于表单的隐藏域
<form action="" method="post">
<input type="hideen" name='"doing" value=" ">//通过doing来区分按下计算时 是执行的哪个table
.....................................................................
</form>
<html> <head> <meta http-equiv="content-type" content="text/html ; charset=utf-8"/> <script> </script> </head> <body> <form action="funcjsq.php" method="post"> <table border="1px" bgcolor="#006699"> <h3>四则运算</h3> 第一个数<input type="text" name="num1"/><br/><br/> 第二个数<input type="text" name="num2"/><br/> 运算符号: <select name="oper"> <option>+</option> <option>-</option> <option>*</option> <option>\</option> </select><br/> <input type="hidden" name="doing" value="jisuan"/> <input type="submit" value="计算结果"/> </form> <form action="funcjsq.php" method="post"> <h3>计算圆形面积</h3> 请输入半径:<input type="text" name="radius"/><br/><br/> 计算结果:<input type="submit" value="面积"/> <input type="hidden" name="doing" value="area"/> </form> </body> </html>
相关文章推荐
- 通过JS,选取radio时显示/隐藏table的功能
- 通过radio和js控制div里的内容显示或者隐藏
- 【功能代码】---5 JS通过事件隐藏显示元素
- 前端单选按钮radio的显示隐藏以及JS重置功能
- 润乾报表如何通过页面js实现报表列显示和隐藏
- js隐藏和显示table
- DIV-----js功能,页面隐藏和显示
- crm2011中通过JS脚本方式显示和隐藏ribbon中的自定义按钮
- AngularJS 中,通过 radio来控制元素的显示和隐藏,以及控制表单元素的 disabled
- JS控制文本框中的密码显示/隐藏功能
- 执行js,通过js显示隐藏的输入框,或者给input赋值
- js控制div样式显示与隐藏,JS通过点击超链接右边(指定位置)显示一个图标
- js控制隐藏或显示table的某一行
- 通过js隐藏或者显示一个DIV
- 点滴积累【JS】---JS小功能(JS实现隐藏显示侧边栏,也就是分享栏的隐藏显示)
- JS控制table显示或隐藏
- JS控制table显示或隐藏
- js通过a链接控制多个DIV只显示其中一个其它隐藏
- 通过radio 显示和隐藏
- Dynamics CRM2011中通过JS脚本方式显示和隐藏ribbon中的自定义按钮