通过JS，选取radio时显示/隐藏table的功能

最新推荐文章于 2023-07-22 21:22:56 发布

regedit1987

最新推荐文章于 2023-07-22 21:22:56 发布

阅读量1.3k

点赞数

分类专栏： HTML自学笔记文章标签： HTML JavaScript

本文链接：https://blog.csdn.net/newoner/article/details/9854639

版权

HTML自学笔记专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<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" οnclick="selType('jisuan')">四则运算
<input type="radio" name="sel" value="bb" οnclick="selType('jux')">计算矩形
<input type="radio" name="sel" value="cc" οnclick="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"来改变表单是否显示出来是否显示。

对于表单的隐藏域

<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>

regedit1987

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
通过JS，选取radio时显示/隐藏table的功能

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
复制链接

扫一扫