选择不同的单选框，隐藏显示不同的页面效果

时间：12-11来源：作者：点击数：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.4.js"></script>
	</head>

	<body>
		<fieldset>
			<legend>处理信息</legend>
			<table>
				<tr>
					<td>是否同意预约</td>
					<td style="text-align: left;" colspan="5">
						<input type="radio" name="sftyyy" id="sftyyy" value="1" checked onclick="xsTyyyTr();" /> 同意&nbsp;&nbsp;&nbsp;&nbsp;
						<input type="radio" name="sftyyy" id="sftyyy" value="0" onclick="jjTyyyTr();" />不同意&nbsp;&nbsp;&nbsp;&nbsp;
						<input type="radio" name="sftyyy" id="sftyyy" value="3" onclick="jjTyyyTr();" />当事人已撤销
					</td>
				</tr>

				<tr id="wsyyjdr" style="display: ;">
					<td width="14%" style="text-align: right;" class="tdtitleBg">预约接待人</td>
					<td style="text-align: left;" colspan="5">
						<select id="clr" name="clr">
							<option value="">请选择</option>
							<option value="1">接待人1</option>
							<option value="2">接待人2</option>
						</select>
					</td>
				</tr>

				<tr id="tyyyTr" style="display: ;">
					<td width="14%" style="text-align: right;" class="tdtitleBg">预约时间</td>
					<td width="230px;" style="text-align: left;">
						<div style="float: left">
							<input type="text" name="yysj" id="yysj" class="date" value="" style="width: 100px;" />
						</div>
					</td>
					<td width="14%" style="text-align: right;" class="tdtitleBg">安排时间</td>
					<td style="text-align: left;" colspan="3">
						<select name="jtapsj_sw" style="width:60px;">
							<option value="">全部</option>
							<option value="1">时间1</option>
							<option value="2">时间2</option>
							<option value="3">时间3</option>
						</select>&nbsp;
					</td>
				</tr>

				<tr>
					<td width="14%" style="text-align: right;" class="tdtitleBg">预约处理结果</td>
					<td style="text-align: left;" colspan="5"><textarea name="yycljg" id="yycljg" style="width:98%;"></textarea></td>
				</tr>

			</table>
		</fieldset>

		<script>
			function xsTyyyTr() {
				document.getElementById("tyyyTr").style.display = "";
				document.getElementById("wsyyjdr").style.display = "";
			}

			function jjTyyyTr() {
				document.getElementById("tyyyTr").style.display = "none";
				document.getElementById("wsyyjdr").style.display = "none";
			}

			function jjTyyyTr() {
				document.getElementById("tyyyTr").style.display = "none";
				document.getElementById("wsyyjdr").style.display = "none";
			}
		</script>

	</body>

</html>

方便获取更多学习、工作、生活信息请关注本站微信公众号 城东书院微信服务号

来顶一下

返回首页

上一篇:VUE中的Class 与 Style 绑定v-bind 下一篇:计算属性和监听器

高考“电脑阅卷”现场	Calibre – 一站式电
新手火腿必看！超详细的	图解 \| 原来这就是TCP