2025年3月24日 星期一 甲辰(龙)年 月廿三 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

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

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

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

  • <!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>
在这里插入图片描述
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门