点击单选按钮隐藏下拉选项

最新推荐文章于 2022-07-28 11:32:41 发布
最新推荐文章于 2022-07-28 11:32:41 发布
阅读量225 收藏
点赞数
文章标签： QQ 教育 JavaScript CSS .net ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liangjingjing1989/article/details/83672014
版权

<%@ page language="java" pageEncoding="UTF-8"%>
<%
 String path = request.getContextPath();
 String basePath = request.getScheme() + "://"
   + request.getServerName() + ":" + request.getServerPort()
   + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <base href="<%=basePath%>">
  <title>酷猫教育网</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="expires" content="-1" />
  <meta name="keywords" content="视频教育,网络教学,暑期补课,名师补习班" />
  <meta name="description" content="暑期补习,学习方法,数理化补课哪里最好?酷猫教育网最好!,远程教学" />
  <meta name="author" content="edu.kum.kum.net.cn, 酷猫教育" />
  <meta name="copyright" content="www.kum.net.cn,酷猫信息" />
  <script>
function $(id){
return document.getElementById(id);
}
function add(s,t){
$("soojs.com").value=parseInt(s)+t;
}
</script>
  <style type="text/css">
body {
 font: 12px Tahoma;
 text-align: center;
 background: #0000rr;
}

.table1 {
 font-size: 12px;
 color: #000000;
}

.input {
 width: 60px;
 height: 20px;
 background-color: #D0DFFF;
 font-size: 15px;
 color: #666699
}

.zhuce_con01 {
 font-size: 14px;
 line-height: 25px;
 margin-top: 5px;
 color: #666666;
}

.btn {
 BORDER-RIGHT: #7b9ebd 1px solid;
 PADDING-RIGHT: 2px;
 BORDER-TOP: #7b9ebd 1px solid;
 PADDING-LEFT: 2px;
 FONT-SIZE: 12px;
 FILTER: progid :DXImageTransform.Microsoft .Gradient(GradientType =0,StartColorStr =#ffffff, EndColorStr= #cecfde);
 BORDER-LEFT: #7b9ebd 1px solid;
 CURSOR: hand;
 COLOR: black;
 PADDING-TOP: 2px;
 BORDER-BOTTOM: #7b9ebd 1px solid
}
</style>
  <script type="text/javascript">
function validate()
{
var resualt=false;
for(var i=0;i<document.form1.r.length;i++)
{
    if(document.form1.r[i].checked)
    {
          resualt=true;
    }
}
if(!resualt)
{
    alert("请选择一个用户类型！");
    return resualt;
}
/**
var choose=form1.r[i].value);
 var xue = document.form1.r.value;
if(xue!=0){
  document.write("用户类型"+xue);
  return false;
  if(document.form1.r[i].value==1){
document.form1.UserClass.style.display="none";
return false;
}
}
*/
if(document.form1.UserName.value.length==0)
{
document.getElementById("username1").innerHTML="<font color='red'>×用户名不能为空</font>";
document.form1.UserName.focus();
return false;
}
else{
document.getElementById("username1").innerHTML="<font color='blue'>√用户名正确</font>";
}
if(document.form1.UserTel.value.length==0){
document.getElementById("usertel1").innerHTML="<font color='red'>×电话号码和手机号码至少选填一个阿</font>";
document.form1.UserTel.focus();
return false;
}
else{
document.getElementById("usertel1").innerHTML="<font color='blue'>√格式正确</font>";
}
if(document.form1.UserTel.value!= ""){   
var phone=document.form1.UserTel.value;   
var p1=/(^[0-9]{3,4}\-[0-9]{7,8}$)|(^[0-9]{7,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/;   
var me = false;   
if (p1.test(phone))me=true;   
if (!me){   
document.form1.UserTel.value='';   
document.getElementById("usertel1").innerHTML="<font color='red'>×您输入的电话号码有错误。区号和电话号码之间请用-分割</font>";   
document.form1.UserTel.focus();
return false;   
} 
else{
  document.getElementById("usertel1").innerHTML="<font color='blue'>√您输入的格式正确</font>"; 
  }
}
if (document.form1.UserEmail.value.indexOf('.')==-1 || document.form1.UserEmail.value.indexOf('@')==-1){
document.getElementById("useremail1").innerHTML="<font color='red'><font color='red'>×邮箱必须包含.和@</font>";
document.form1.UserEmail.focus();
return false;
}
else{
document.getElementById("useremail1").innerHTML="<font color='blue'><font color='blue'>√邮箱格式正确</font>";
}
if(document.form1.answer.value.length==0){
document.getElementById("answer1").innerHTML="<font color='red'>×问题答案不能为空，请正确填写信息！</font>";
document.form1.answer.focus();
return false;
}
else{
document.getElementById("answer1").innerHTML="<font color='blue'><font color='blue'>√好的!请保管好，方便找回账号</font>";
}
return true;
}
</script>
 </head>
 <body>
  <h3 id="pgtitle">
   kum视频教学账号申请
  </h3>
  <p id="pgtitletext">
   要求填写所有信息。带*号的必填
  </p>

  <div class="bluebar">
   &nbsp;
  </div>
  <font size="2" color="blue" style="margin-left: 1300px;">填写基本信息&nbsp;&nbsp;|&nbsp;&nbsp;kum教学软件</font>
  <hr>
  <form action="UserLoginServlet" name="form1" method="post"
   οnsubmit="return(validate())">
   <table width="50%" border="0" class="table1" align="center"
    style="margin-top: 80px;" bgcolor="">
    <tr>
     <td width="25%" height="22" align="right">
      用户选择：
      <br>
     </td>
     <!-- style="display:none" 设置下拉单选按钮的隐藏 -->
     <td height="22" colspan="2" align="left">
      <input type="radio" name="r" value="1" id="cc"
          οnclick="qq.style.display='none'">
      一般用户
      <input type="radio" name="r" value="0" id="cc"
       οnclick="qq.style.display='block'">
      学生
     </td>
    </tr>
    <tr>
     <td width="25%" height="22" align="right">
      用户姓名：
      <br>
     </td>
     <td height="22" colspan="2" align="left">
      <input name="UserName" id="UserName" type="text" class="form"
       size="32" />
      *
      <span id="username1">(请填写正确的用户名)</span>
     </td>
    </tr>
    <tr>
     <td width="25%" height="22" align="right">
      电话号码：
      <br>
     </td>
     <td height="22" colspan="2" align="left">
      <input name="UserTel" id="UserTel" type="text" class="form"
       size="32" />
      *
      <span id="usertel1">(请填写正确的号码，可以固定电话也可以是手机号码)</span>
     </td>
    </tr>
    <tr>
     <td width="25%" height="22" align="right">
      用户邮箱：
     </td>
     <td height="22" colspan="2" align="left">
      <input name="UserEmail" id="UserEmail" type="text" class="form"
       size="32" />
      *
      <span id="useremail1">(请填写真实的E-mail地址(如:123@sina.com)，方便找回密码)</span>
     </td>
    </tr>
    </table>
    <div id="qq">
    <table width="50%" border="0" class="table1" align="center">
    
    <tr>
     <td width="25%" height="22" align="right" id="car5">
      学生年级：
     </td>
     <td height="22" colspan="2" align="left">
      <select name="UserClass" class="form">
       <option value="一年级">
        一年级
       </option>
       <option>
        二年级
       </option>
       <option>
        三年级
       </option>
       <option>
        四年级
       </option>
       <option>
        五年级
       </option>
       <option>
        六年级
       </option>
       <option>
        初一年级
       </option>
       <option>
        初二年级
       </option>
       <option>
        初三年级
       </option>
       <option>
        高一年级
       </option>
       <option>
        高二年级
       </option>
       <option>
        高三年级
       </option>
      </select>
     </td>
    </tr>
    </table>
   </div>
   <table width="50%" border="0" class="table1" align="center" style="margin-left: 200px;">
    <tr>
     <td height="22" align="right">
      验证码：
     </td>
     <td height="22" colspan="2" align="left">
      <input name="chknumber" id="chknumber" type="text" class="type1"
       style="color: #808080; ime-mode: disabled;" size="32"
       maxlength="32" value="输入字符，不区分大小写"
       οnfοcus="if(value=='输入字符，不区分大小写'){value=''}" />
      <img src="CheckCodeServlet" width="80" id="code"
       οnclick="javascript:document.getElementById('code').src='CheckCodeServlet';return false;"
       class="input" />
     </td>
    </tr>
    <tr>
     <td height="22" align="right">
      回答问题:
     </td>
     <td height="22" colspan="2" align="left">
      <select name="ask" class="form" id="ask">
       <option value=您父亲或者母亲的姓名>
        您父亲或者母亲的姓名
       </option>
       <option>
        你的出生地
       </option>
       <option>
        你童年最好的朋友
       </option>
      </select>
      <span id="ask1"></span>

     </td>
    </tr>
    <tr>
     <td height="22" align="right">
      问题答案:
     </td>
     <td>
      <input name="answer" id="answer" type="text" class="form"
       size="32" />
      *
      <span id="answer1">(填写正确的信息)</span>
     </td>
    </tr>
    <tr>
     <td height="22" align="right">

     </td>
     <td>
      <input type="submit" class=btn title="同意" value="同意" id="tijiao" />
      &nbsp;&nbsp;&nbsp;
      <input type="reset" class=btn title="重置">
      &nbsp;&nbsp;&nbsp;
      <input type="button" class=btn title="找回密码" value="找回帐号"
       onClick="window.location.reload('find.jsp');">
      <P></p>

     </td>
    </tr>
   </table>
  </form>
  <div style="margin-top: 200px;" align="center">
   <hr>
   <span><font size="2"><strong>Copyright &copy;
      1998-2010 Tencent Inc. All Rights Reserved</strong></font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font size="2">酷猫公司，版权所有</font> </span>
    
  </div>
 </body>
</html>

liangjingjing1989
关注
React中通过diaplay实现控件按钮的呈现与隐藏
只如初见0706的博客
03-16 3万+
1、实现效果通过单击编辑图标实现页面中对应按钮的呈现与隐藏、效果图如下2、代码实现import React, { Component } from 'react'; import '../../../style_css/antd.css'; import { Layout,Icon,Row, Col} from 'antd'; class Index extends Component { ...
VB 单选按钮的属性、方法与事件实例
06-07
VB 单选按钮的属性、方法与事件实例 VB 单选按钮的属性、方法与事件实例
单选按钮显示隐藏控件
yoookoo的专栏
03-12 704
要上门不要上门
html隐藏与显示下拉框,jQuery设置下拉框显示与隐藏效果的方法分析_鹿岛_前端开发者...
weixin_39599454的博客
06-04 1932
本文实例讲述了$("select").hide(); // 隐藏下拉框$("select").show(); // 显示下拉框$("select").toggle(); // 如果下拉框是显示的则隐藏之，反之亦然示例代码如下1. 创建点击按钮可以显示或隐藏下拉框：请选择一个项目我不选选就选吧2. 设置div.box{width:300px;padding:20px;margin:20px...
2022-07-28 xm-select 的使用
ZT1090258642的博客
07-28 7915
文档。
单选按钮和下拉菜单
04-05
在Android开发中，单选按钮（RadioButton）和下拉菜单（Spinner）是常见的用户界面组件，用于收集用户输入或提供选项选择。它们都是Android SDK中的重要控件，为用户提供了一种简洁、直观的交互方式。 单选按钮...
使用单选按钮和下拉菜单的7个规则 .doc
03-14
在构建用户界面时，合理使用单选按钮和下拉菜单对于提升用户体验至关重要。单选按钮和下拉菜单作为常见的表单元素，各自适用于不同的场景。以下是对这两种输入控件使用规则的详细阐述： 1. **使用单选按钮的场景：*...
js使用DOM设置单选按钮、复选框及下拉菜单的方法
10-24
标题中提到的知识点是“js使用DOM设置单选按钮、复选框及下拉菜单的方法”，描述中指出该知识点在介绍如何使用JavaScript的文档对象模型（DOM）来控制HTML表单中的单选按钮、复选框以及下拉菜单的行为。具体来说，这...
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
10-18
在实际应用中，通常建议为单选按钮和复选按钮的组添加相同的name属性，并为下拉列表的每个选项明确设置value属性，这样能更清晰地控制数据的流向和表单的行为。熟练运用Vue.js处理表单，不仅可以提升开发效率，还...
8.2.点击表单控件（单选/复选/开关/下拉框），实现元素隐藏显示
大路的博客
02-26 2486
1.需求 1.1.使用场景 在添加编辑表单，经常会出现根据选项，动态显示和隐藏某些元素。比如添加一个网络设备，当选择通讯方式为串口时，需要填写串口号和波特率；当选择通讯方式为网卡时，需要选择IP地址和子网掩码。串口号和IP地址，不能同时出现，只能二选一。如下图所示的效果。 1.2.解决思路 正常的实现思路，是将这些表单输入框都放到页面上，然后根据通讯方式，进行动态的显示和隐藏。利用框架...
单选框radio控制div的显示和隐藏
热门推荐
奔跑的蜗牛
09-28 2万+
通过鼠标单击单选框的动作，实现某个div或多个div的显示和隐藏。实例如下： function divClick(){ var show=""; var apm = document.getElementsByName("AdPrintMode"); for(var i=0;i<apm.length;i++){
单选框控制表单的隐藏和显示
SailingAptech的专栏
03-17 954
[code="html"] function show(){ document.getElementById("test").style.display = "block"; } function hide(){ document.getElementById("test").style.display = "none"; } 显示不显示 ...
React 点击按钮显示div与隐藏div
徐同保的专栏
11-07 1万+
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;React 点击按钮显示div与隐藏div&lt;/title&gt; &lt;script src="https://unpkg.com/react@16/u
点击单选按钮改变div显示隐藏
Gujiaw的博客
10-15 2452
点击单选按钮改变div显示隐藏 JQuery:    function showCont() {        switch ($("input[name=selector]:checked").attr("id")) {        case "noperid":            $("#noperid_div").show();          
JavaScript中通过点击单选框动态显示和隐藏组件
北辰
05-29 1974
<body> <table> <tr> <td class="tt" title="项目类别"> 项目类别</td> <td> <input type="radio" value="1" name="demo1">政府 <inp...
js点击下拉列表按钮，显示，点击其他地方（包括下拉按钮）隐藏下拉列表
muzidigbig的博客
03-08 9947
主要思想：冒泡事件 事实上stopPropagation()和cancelBubble的作用是一样的，都是用来阻止浏览器默认的事件冒泡行为。 不同之处在于stopPropagation()属于W3C标准，试用于Firefox等浏览器，但是不支持IE浏览器。相反cancelBubble不符合W3C标准，而且只支持IE浏览器。所以很多时候，我们都要结合起来用。不过，cancelBubble在新版本...
监听radio按钮是否点击，并且在点击后显示隐藏标签。
Gala_L的博客
12-26 1489
可以通过JQ的change方法实时监听 好用，记录一下 &lt;p class="audi"&gt; &lt;input type="radio" value="1" name="select" checked="checked"&gt;通过 &lt;input type="radio" value="2"
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值