input之radio标签的选择值&提交表单进行校验

最新推荐文章于 2023-02-01 13:49:09 发布
最新推荐文章于 2023-02-01 13:49:09 发布
阅读量1.1k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45390688/article/details/110846738
版权

需要注意一些问题，标签中onclick对与一些浏览器无效，可以在父级标签设置onchange，然后在方法中根据value值进行逻辑处理

<%@ page import="Utils.RespReturn" %>
<%@ page import="Utils.getFromSQL" %>
<%@ page import="java.util.ArrayList" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/12/7
  Time: 8:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>特色课报名表</title>
  <!--内部js-->
  <!--外部js-->
</head>
<body>
<form id="oform" name="userForm" action="/lowbegin" method="get"  onsubmit="return check()">
  学生姓名：
  <input name="name" type="text" />
  <br><br>
    <img id="tupian" src="/demo09"/>
    <a id="dianji" href="">看不清，换一张</a>
  <br><br>
  请输入验证码：
  <input name="yzm" type="text" />
  <br><br>
  班级：
  <select id="selectid" name="grade" onchange="funn()">
    <option value="11">一（1）班</option>
    <option value="12">一（2）班</option>
    <option value="13">一（3）班</option>
    <option value="21">二（1）班</option>
    <option value="22">二（2）班</option>
    <option value="23">二（3）班</option>
    <option value="24">二（4）班</option>
    <option value="31">三（1）班</option>
    <option value="32">三（2）班</option>
    <option value="33">三（3）班</option>
    <option value="41">四（1）班</option>
    <option value="42">四（2）班</option>
    <option value="43">四（3）班</option>
    <option value="51">五（1）班</option>
    <option value="52">五（2）班</option>
    <option value="61">六（1）班</option>
  </select>
  <br><br>
  性别：
  <input type="radio" name="gender" value="f" checked/>男
  <input type="radio" name="gender" value="m" />女
  <br><br>
  家长联系电话：
  <input name="phoneNumber" type="text" />
  <br><br>
  <ddd id="neirong">
    <%
        ArrayList mon_values_1=new ArrayList();
        ArrayList types_1=new ArrayList();
        ArrayList mon_values_2=new ArrayList();
        ArrayList types_2=new ArrayList();
        ArrayList mon_values_3=new ArrayList();
        ArrayList types_3=new ArrayList();
        ArrayList mon_values_4=new ArrayList();
        ArrayList types_4=new ArrayList();
        ArrayList mon_values_5=new ArrayList();
        ArrayList types_5=new ArrayList();
        out.write("周一");
      for(String type:RespReturn.teseMap.get("周一")){
        int count = getFromSQL.getCount("mon",type);
        mon_values_1.add(count);
        types_1.add(type);
        out.write("<br><br>&nbsp;&nbsp;&nbsp;");
        out.write("<input type=\"radio\" name=\"interest1\" value=\""+type+"\" checked/>"+type+"，剩下名额"+(50-count)+"，设定人数50人");
      }
        out.write("<br><br>周二");
      for(String type:RespReturn.teseMap.get("周二")){
          int count = getFromSQL.getCount("tue",type);
          mon_values_2.add(count);
          types_2.add(type);
          out.write("<br><br>&nbsp;&nbsp;&nbsp;");
          out.write("<input type=\"radio\" name=\"interest2\" value=\""+type+"\" checked/>"+type+"，剩下名额"+(50-count)+"，设定人数50人");
      }
        out.write("<br><br>周三");
      for(String type:RespReturn.teseMap.get("周三")){
          int count = getFromSQL.getCount("wed",type);
          mon_values_3.add(count);
          types_3.add(type);
          out.write("<br><br>&nbsp;&nbsp;&nbsp;");
          out.write("<input type=\"radio\" name=\"interest3\" value=\""+type+"\" checked/>"+type+"，剩下名额"+(50-count)+"，设定人数50人");
      }
      for(String type:RespReturn.teseMap.get("周四")){
         int count = getFromSQL.getCount("thu",type);
         mon_values_4.add(count);
         types_4.add(type);
      }
      for(String type:RespReturn.teseMap.get("周五")){
          int count = getFromSQL.getCount("fri",type);
          mon_values_5.add(count);
          types_5.add(type);
      }
    %>
  </ddd>
  <br><br>
  <input type="submit" value="提交"/>
  <input type="reset" value="重置"/>
</form>

<script>
    var neirong = document.getElementById("neirong");
    var selectid=document.getElementById("selectid");
    var week = new Array();
    <%   for(int i=0;i <mon_values_1.size();i++){   %>
    week[<%=i%>] = "<%=mon_values_1.get(i)%>";
    <%   }   %>

    var type = new Array();
    <%   for(int i=0;i <types_1.size();i++){   %>
    type[<%=i%>] = "<%=types_1.get(i)%>";
    <%   }   %>

    var week2 = new Array();
    <%   for(int i=0;i <mon_values_2.size();i++){   %>
    week2[<%=i%>] = "<%=mon_values_2.get(i)%>";
    <%   }   %>

    var type2 = new Array();
    <%   for(int i=0;i <types_2.size();i++){   %>
    type2[<%=i%>] = "<%=types_2.get(i)%>";
    <%   }   %>
    var week3 = new Array();
    <%   for(int i=0;i <mon_values_3.size();i++){   %>
    week3[<%=i%>] = "<%=mon_values_3.get(i)%>";
    <%   }   %>

    var type3 = new Array();
    <%   for(int i=0;i <types_3.size();i++){   %>
    type3[<%=i%>] = "<%=types_3.get(i)%>";
    <%   }   %>

    var week4 = new Array();
    <%   for(int i=0;i <mon_values_4.size();i++){   %>
    week4[<%=i%>] = "<%=mon_values_4.get(i)%>";
    <%   }   %>

    var type4 = new Array();
    <%   for(int i=0;i <types_4.size();i++){   %>
    type4[<%=i%>] = "<%=types_4.get(i)%>";
    <%   }   %>
    var week5 = new Array();
    <%   for(int i=0;i <mon_values_5.size();i++){   %>
    week5[<%=i%>] = "<%=mon_values_5.get(i)%>";
    <%   }   %>

    var type5 = new Array();
    <%   for(int i=0;i <types_5.size();i++){   %>
    type5[<%=i%>] = "<%=types_5.get(i)%>";
    <%   }   %>
    function funn(){
        if(selectid.value<=33){
            fun();
        }else{
            fun2();
        }
    }
    function fun() {
        var str="周一";
        for(i=0;i<week.length;i++){
            str = str+"<br><br>&nbsp;&nbsp;&nbsp;"+"<input type=\"radio\" name=\"interest1\" value=\""+type[i]+"\" checked/>"+type[i]+"，剩下名额"+(50-week[i])+"，设定人数50人";
        }
        str=str+"<br><br>"+"周二";
        for(i=0;i<week2.length;i++){
            str = str+"<br><br>&nbsp;&nbsp;&nbsp;"+"<input type=\"radio\" name=\"interest2\" value=\""+type2[i]+"\" checked/>"+type2[i]+"，剩下名额"+(50-week2[i])+"，设定人数50人";
        }
        str=str+"<br><br>"+"周三";
        for(i=0;i<week3.length;i++){
            str = str+"<br><br>&nbsp;&nbsp;&nbsp;"+"<input type=\"radio\" name=\"interest3\" value=\""+type3[i]+"\" checked/>"+type3[i]+"，剩下名额"+(50-week3[i])+"，设定人数50人";
        }
        neirong.innerHTML=str;
    }
    function fun2() {
        var str="周四";
        for(i=0;i<week4.length;i++){
            str = str+"<br><br>&nbsp;&nbsp;&nbsp;"+"<input type=\"radio\" name=\"interest4\" value=\""+type4[i]+"\" checked/>"+type4[i]+"，剩下名额"+(50-week4[i])+"，设定人数50人";
        }
        str=str+"<br><br>"+"周五";
        for(i=0;i<week5.length;i++){
            str = str+"<br><br>&nbsp;&nbsp;&nbsp;"+"<input type=\"radio\" name=\"interest5\" value=\""+type5[i]+"\" checked/>"+type5[i]+"，剩下名额"+(50-week5[i])+"，设定人数50人";
        }
        neirong.innerHTML=str;
    }
    function check() {
        var mon="1";
        var tue="2";
        var wed="3";
        var thu="4";
        var fri="5";
        var len = oform.elements.length;
        var i = 0;
        for(i=0;i<len;i++){
            if(oform.elements[i].name=="interest1"){
                if(oform.elements[i].checked){
                    mon = oform.elements[i].value;
                }
            }
            if(oform.elements[i].name=="interest2"){
                if(oform.elements[i].checked){
                    tue = oform.elements[i].value;
                }
            }
            if(oform.elements[i].name=="interest3"){
                if(oform.elements[i].checked){
                    wed = oform.elements[i].value;
                }
            }
            if(oform.elements[i].name=="interest4"){
                if(oform.elements[i].checked){
                    thu = oform.elements[i].value;
                }
            }
            if(oform.elements[i].name=="interest5"){
                if(oform.elements[i].checked){
                    fri = oform.elements[i].value;
                }
            }
        }
        if(mon==tue||mon==wed||tue==wed){
            alert("您所选的特色课存在重复，请重新选择");
            return false;
        }
        if(thu==fri){
            alert("您所选的特色课存在重复，请重新选择");
            return false;
        }
        if(mon=="1"&&tue=="2"&&wed=="3"){
            if(thu=="4"||fri=="5"){
                alert("您的课程存在漏选");
                return false;
            }
        }
        if(thu=="4"&&fri=="5"){
            if(mon=="1"||tue=="2"||wed=="3"){
                alert("您的课程存在漏选");
                return false;
            }
        }
        if(mon=="1"&&tue=="2"&&wed=="3"&&thu=="4"&&fri=="5"){
            alert("您的课程存在漏选");
            return false;
        }
        //  alert("aaa");
        return true;
    }
    window.onload = function(){
        var tupian = document.getElementById("tupian");
        tupian.onclick = fun;
        var danji = document.getElementById("danji");
        danji.onclick = fun;
        function fun() {
            var date = new Date();
            tupian.src = "/demo09?"+date.getTime();
        }
    }
</script>
</body>
</html>

通过选择不同的班级，对应出现不同的内容
在这里插入图片描述
在这里插入图片描述

梨花烧
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery中使用validate插件校验表单功能
12-29
一.功能效果 二.部分特殊规则 2.1 错误信息位置更改 在表单某选项中增加代码 表单中选项的name> ...--这里设置表单校验错误信息的显示位置--> <label class=error for=sex></label> 2.2 身份证验证
JS实现简单的选择题测评系统代码思路详解(demo)
01-19
包含内容：JS封装表单，JS校验表单 说是测评系统，感觉只能算是一个小小的Demo，很水，，没有数据库库，，仅使用JS做简单的选择题测评系统 ——————————————————————————– 一、设计思路 ...
input-radio(单选框)值的获取/默认选中等操作
旗袍不开、怎么得胜？
06-11 6785
input-radio(单选框)值的获取/默认选中等操作 由于每一个单选框均为一个单独的input，无法用id直接获取。可通过将一组radio配置为同一个class下，统一管理。 通过class获取input框的选中值： $("input[name='addusersex']:checked").val() radio的常用方法： 1.获取选中值，三种方法都可以： $('input:radio:checked').val()； $("input[type='radio']:checked").val();
input框的一系列操作(输入框必填*号,验证单选框为必选,默认选中单选按钮,点击禁用表单输入域,输入框变为只读)
qq_43437571的博客
07-16 2万+
例① ：输入框必填，用*号提示 <p class="form-group"> <label for="author">姓名</label> <span class="required" style="color:red">*</span> <br> <input type="text" id="a...
HTML之input表单中的radio单选框
我心坚持
01-15 5312
1、radio： input的tyep类型设置为radio； value：是要传递给后端的数据，是必填项；如果value没有填值，则将on作为值传递给后端。 如果不设置相同的name，则两个都可以选中； 如果设置相同的name如下图，只能选中其中一个。 checked：是默认选中选项。 maxlength：是正整数，限制字符最大长度； disabled：表示禁止选用 ...
Element UI极简教程(3)：Radio、Checkbox、Input组件的使用
ningnan9801的博客
12-21 3540
Java大联盟 致力于最高效的Java学习关注B 站搜索：楠哥教你学Java获取更多优质视频教程Radio 单选框Element UI 的 Radio 使用起来非常简单，直接使用 e...
html中的单选按钮radio如何实现可同时选中多个值进行表单提交
yds303999450的博客
08-19 1万+
为了便于学习，我们将单选按钮radio和复选框checkbox作对比： 具体代码如下： ****************************************************test.html文件如下**************************************************************************
jq——监听input组件type=“radio“单选框的change事件——基础积累
yehaocheng520的博客
02-01 5109
jq——监听input组件type="radio"单选框的change事件——基础积累
Vue操作Input标签radio单选功能，点击选择，再次点击取消
q879936814的博客
09-16 2798
input标签有一个属性是checked，需要操作这个即可。 <input tyoe="radio" value="1" v-model="value" @click=choose($event)>123 choose(e){ if(e.target.value == this[e.target.name]{ e.target.checked = false this[e.target.name] = '' }) } ...
Vue动态控制input的disabled属性的方法
12-29
有时候会有这样的需求，新增的时候可以输入，但是无法修改，此时就需要通过控制input标签的disabled属性来实现，那vue是如何动态设置input输入框的disabled属性的呢？ 输入框的html源代码 配置项 v-bind:disabled=...
解决antd 表单设置默认值initialValue后验证失效的问题
01-21
方法一： getFieldDecorator没有第三个参数，如果写了3个参数...Input placeholder='\u8bf7\u8f93\u5165\u7528\u6237\u540d'/> ) } </Form.Item> 正确代码： <Form.Item> { getFieldDecorator('use
jQuery 判断元素整理汇总
12-09
在表单提交之前，我们往往要利用 JavaScript 校验用户输入值，如果用户输入有误，那么我们就往该表单元素添加一个 error 的 class，再配合 CSS，该表单元素就显示为红色，以提醒用户。 最后我们还要根据是否有 error...
html 单选按钮触发函数,单选按钮的OnChange事件处理程序（INPUT type =“ radio”）不能用作一个值...
weixin_33656211的博客
06-26 982
我正在为此寻求一个通用的解决方案。考虑2个具有相同名称的无线电类型输入。提交后，选中的将确定以以下形式发送的值：取消选择单选按钮时，更改事件不会触发。因此，如果已经选择了值=“1”的单选按钮，并且用户选择了第二个，则handleChange1()不会运行。这(无论如何对我而言)带来了一个问题，因为没有任何事件可以使我取消选择。我想要的是一个针对复选框组值的onchange事件或一个oncheck事...
js获取input = radio 单选框选择中的值
热门推荐
xiejunna的博客
08-17 2万+
调用： var amount = getRadioButtonChecked("radio"); console.log("amount=="+amount);/** * 获取input = radio 单选框中选中的值 * @param tagNameAttr string radio组中input的name属性值 * return 返回被选中radio的值 */ function
vue表单输入绑定中input为radio、checkbox的简单介绍
mon_star°的博客
12-01 1276
表单输入绑定 值绑定 对于单选按钮，复选框及选择框的选项，v-model绑定的值通常是静态字符串 (对于复选框也可以是布尔值)： <!-- 当选中时，`picked` 为字符串 "a" --> <input type="radio" v-model="picked" value="a"> <!-- `toggle` 为 true 或 false --> <input type="checkbox" v-model="toggle"> <!-.
多组radio传值注意事项
12-14 239
多组radio传值，每组的radio name必须不同，否则所有的radio将被视为一组，传值时只会传其中一组的值到后台，如果这时你用数组接收从前台传过来的值并使用，就会报数组越界异常 转载于:https://www.cnblogs.com/luoxiaolei/p/5045284.html...
html input标签 单选按钮 radio
qq_42265536的博客
12-22 2万+
单选按钮 radio : 只能从选项列表中选择一项，选项与选项之间相互排斥 语法： &lt;input type="radio" name="单选按钮所在的组名" value="单选按钮的取值"&gt; 相同的 name 属性就是一个组，在这个组中只能单选一个 value 向服务器传递的数据 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head
node-v18.18.2-headers.tar.xz
最新发布
05-20
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
uniapp单选框的表单校验代码
06-10
uniapp中的单选框表单校验可以使用`v-model`指令配合`required`属性来实现。具体代码如下： ```html <input type="radio" value="male" v-model="gender" required>男 <input type="radio" value=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值