表单中通过单选框或复选框控制输入框的显示和隐藏

layui下拉框实现可输入、可选择 想要实现可输入,可选择,可以直接定义两个标签(input、select),对下拉框进行监听,将下拉框的值赋值给input position:absolute 在这里是让input和select在同一位置。 z-index:2 是为了让input在select上面。 width:80% 是为了不盖住select后面的小三角符号,select还可以点击。 autocomplete=“off” 为了不自动填充input框,免得压盖select选项定义下拉框下拉数据,对下拉框进行监听 后端代码 service层.. 阅读详情
<form action="{:sysuri()}" method="post" data-auto="true" class="layui-form layui-card">
    //单选框 控制输入框---------------------
    <div class="layui-input-block">
        <label class="think-radio notselect">
            <input type="radio" name="status" value="1" lay-ignore>通过
            <input type="radio" name="status" value="2" lay-ignore>不通过
        </label>
    </div>

    <div class="layui-form-item" id="div-reason">
        <label class="layui-form-label">
            <b class="color-green">理由</b><br><span class="nowrap color-desc">Reason</span>
        </label>
        <div class="layui-input-block">
            <input type="text" name="reason" required value="" placeholder="请输入" class="layui-input">
            <p class="help-block">通过理由</p>
        </div>
    </div>

    //复选框 控制输入框----------------------------------
    <div class="layui-input-block">
        <label class="think-checkbox notselect">
            <input type="checkbox" id="checkYaml" name="status2" value="1" lay-ignore>允许
        </label>
    </div>

    <div class="layui-form-item" id="branch_build_div">
        <label class="layui-form-label">
            <b class="color-green">允许类型</b><br><span class="nowrap color-desc">AllowExts</span>
        </label>
        <div class="layui-input-block">
            <input type="text" name="allow_exts" required value="" placeholder="请输入" class="layui-input">
            <p class="help-block">设置系统</p>
        </div>
    </div>
    //---------------------------------------------------

    <div class="layui-form-item text-center">
        <button class="layui-btn" type="submit">提交</button>
    </div>
</form>
<script>
    $(function () {
        //先隐藏输入框两个输入框
        $('#div-reason').hide();
        $("#branch_build_div").hide();

        //单选框 控制输入框---------------------
        
        $('input:radio[name="status"]').change(function () {
            var v = $(this).val();
            if (v == '1') {
                $('#div-reason').show();
            } else {
                $('#div-reason').hide();
            }
        });
        
        //复选框 控制输入框----------------------------------
        $("#checkYaml").change(function () {
            if ($("#checkYaml").prop("checked")) {
                $("#branch_build_div").show();
            } else {
                $("#branch_build_div").hide();
            }

        });
    })
</script>
8.2.点击表单控件(单选/复选/开关/下拉框),实现元素隐藏显示 1.需求 1.1.使用场景 在添加编辑表单,经常会出现根据选项,动态显示和隐藏某些元素。比如添加一个网络设备,当选择通讯方式为串口时,需要填写串口号和波特率;当选择通讯方式为网卡时,需要选择IP地址和子网掩码。串口号和IP地址,不能同时出现,只能二选一。如下图所示的效果。 1.2.解决思路 正常的实现思路,是将这些表单输入框都放到页面上,然后根据通讯方式,进行动态的显示和隐藏。利用框架... 阅读详情

相关推荐

crmeb 电商系统 PHP快速生成表单,支持表单验证

PHP表单生成器,快速生成现代化的form表单。包含复选框、单选框、输入框、下拉选择框等元素以及省市区三级联动、时间选择、日期选择、颜色选择、树型、文件/图片上传等功能。 安装 composer require xaboy/form-builder 示例 演示地址 演示站后台:[ crmeb_v2.5 ] demo.crmeb.net 账号:demo 密码:crmeb.com 下载源码地址:...

zpf6023fei的博客 2192

Layui input隐藏

type="hidden"

k965965的博客 1005

layui中使用JavaScript监听下拉框(select)的变化,根据选中的值来决定是否显示或隐藏input元素

HTML和CSS用于设置网页的基本结构和样式,而JavaScript则用于实现交互功能,比如根据下拉框的选项来控制input元素的显示或隐藏。

挖掘大数据价值,让决策者快速洞悉趋势,让大众读懂数据背后的故事。 4993

解决layui隐藏域:不显示问题(含案例、代码、截图)

layui 隐藏域:不显示问题(案例篇) 自定义的隐藏域不显示? 只需要给隐藏域添加一个layui-input类名即可,其他不用改变。 案例 · 效果图: 代码示下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale

草巾冒小子的博客 3004

layui radio点击事件实现input显示和隐藏的例子

今天小编就为大家分享一篇layui radio点击事件实现input显示和隐藏的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

解决Anaconda环境下catkin_make编译报错:Python路径冲突与empy模块缺失

本文详细分析了在Anaconda环境下使用catkin_make编译时出现的Python路径冲突与empy模块缺失问题,提供了快速解决方案和永久性环境配置方法。通过显式指定Python解释器路径或调整Anaconda配置,有效解决编译报错问题,适用于ROS开发与科学计算并行的场景。

weixin_28829629的博客 354

[笔记] 狂神 js 视频笔记 08(操作表单)

相关页面 ↓ 首页-KuangStudy 遇见狂神说的个人空间 - 哔哩哔哩 ( ゜- ゜)つロ 乾杯~ Bilibili 【狂神说Java】JavaScript最新教程通俗易懂_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili JavaScript教程 - 廖雪峰的官方网站 8、操作表单 8.1、回顾 用JavaScript操作表单和操作DOM是类似的,因为表单本身也是DOM树。 不过表单的输入框、下拉框等可以接收用户输入,所以用JavaScript来操作表单,可以获得用户输入的.

禾木 181

储能EMS工作原理深度剖析:功率分配与充放电策略的底层逻辑

储能EMS的功率分配与充放电策略,是其智能化的集中体现。功率分配更像一个“执行指挥官”,关注如何将总任务高效、公平、安全地分解到每个士兵(PCS/电池簇);而充放电策略则像“总参谋长”,基于战场情报(市场、电网、自身状态)制定最优的作战计划。AI强化学习策略:让EMS通过与复杂环境不断交互,自主学习最优策略,适应不确定性。数字孪生与仿真:在虚拟空间中提前验证策略,评估风险,实现预防性控制。跨站协同优化:多个储能站的EMS通过云平台协同,参与区域电网甚至跨省市场的联合优化调度。

小帽子的博客 375

element ui根据复选框控制字段显示和隐藏

element ui根据复选框控制字段显示和隐藏

lam521_125的博客 2873

医药行业SAP序列号管理深度解析:如何满足GMP合规要求

本文深度解析了医药行业如何利用SAP序列号管理构建满足GMP合规要求的数字化追溯体系。文章详细阐述了SAP序列号在实现从生产到患者全流程“一物一码”精准追溯中的核心作用,并探讨了其与质量管理、冷链监控等系统的关键集成配置,为医药企业应对严格监管、保障产品质量与安全提供了切实可行的技术方案。

backprop5master的博客 656

嵌入式常用通信协议 #概述

嵌入式通信协议

AFK3060的博客 2117

HTML中form表单作用解释

表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。

听风的雨滴 1万+

Python 爬虫实战:爬取豆瓣读书评论并分析

摘要:本文以豆瓣读书《活着》评论数据为例,详细讲解Python爬虫开发与文本分析全流程。首先通过requests库爬取评论数据,解决分页、反爬等问题;然后利用BeautifulSoup解析页面提取评论内容、评分等核心信息;最后结合jieba进行关键词提取、snownlp完成情感分析,并通过可视化展示结果。分析显示该书评分以5星为主(占比70%),正面评论达82%,核心关键词为"活着""余华""生命"。全文包含完整代码与详细解析,帮助读者掌握非结构化

2503_91057718的博客 1497

js控制复选框选中显示不同表单_这个笔记《HTML5表单验证》,前端后端都爱看...

表单表单元素表单元素的一般语法:1. 2. 特殊的选项的文本...值表单元素1. 用来填的text : 单行文本框password : 密码框textarea : 多行文本框email : 邮件地址输入框url : 网址输入框number : 数字输入框属性:size可以控制宽度maxlength可以控制最大输入的字符数max(最大值), min(最小值)对number,range有效2. 用来选...

weixin_39878401的博客 364

全网最详细教程,手把书教你使用YOLOv10训练自己的数据集和推理(附YOLOv10网络结构图)

YOLOv10,由清华大学多媒体智能组只开发,是一款亳秒级实时端到端目标检测的开源模型。该模型在保持性能不变的情况下,与YOLOv9相比,延迟减少了46%,参数减少了25%,非常适合需要快速检测物体的应用,如实时视频分析、自动驾驶和智能医疗等领域。这些改进使得YOLOv10在实时物体检测领域达到了新的技术水平。

在职AI算法工程师,擅长计算机视觉,YOLO目标检测、分割等,擅长web、pyqt界面可视化,好内容持续更新中,来这里跟大家一起学习,共同进步 1万+

电脑技巧:Hyper-V安装UOS操作系统图文教程

今天给大家分享微软官方Hyper-v虚拟机管理软件安装UOS操作系统图文教程,感兴趣的朋友也可以下载试一试,当然有啥问题也可以互相沟通交流!

IT技术分享社区 4707

js控制复选框选中显示不同表单_html基础必备-表单标记,前端小白一看就会

表单表单允许我们发送和接收来自web页面的数据,表单的用途有:网站和论坛登录;注册信息;基于web的电子邮件;在线问卷调查等。表单 - ... 所有表单元素(如输入框和按钮)必须位于表单标记内。在大多数情况下,表单必须设置name、action属性。name=“?” - 标识表单的唯一名称,由操作脚本使用。action=“url” - 提交时处理表单数据的脚本的地址(url)。在某些情况下,不需...

weixin_39830323的博客 550

华为OD机试双机位C卷-简单的解压缩算法(C/C++/Py/Java/Js/Go)

华为OD机试(机考)双机位C卷 【简单的解压缩算法】,提供C语言、Java、C++、Python、Go、JavaScript源码实现,并提供完整思路讲解,以及在线OJ模拟做题。华为OD真题【简单的解压缩算法】。

qq_45776114的博客 477

常见的表单元素有哪些?各有什么属性?

常见的表单元素有哪些?各有什么属性? 1.背景介绍 表单元素是允许用户在表单中输入信息的元素。随着时代的改变和互联网的发展,表单的使用越来越广泛。 2.知识剖析 (1)什么是表单 表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选...

qq_34573534的博客 8723

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员,提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列,各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性,请参见数据手册。有关 ARM Cortex™-M4F 内核的信息,请参见《Cortex™-M4F 技术参考手册》。

你知道如何修改单选框、复选框、下拉框的默认样式吗

HTML 原生的单选框、复选框元素样式在各个浏览器上面由用户代理默认设置样式,如果在页面上应用了其他颜色或主题时,我们通常也相应的更改这些输入框或按钮的颜色或背景,否则会出现颜色与背景或主题不融入的样式不一致问题。整理了75个JS高频面试题,并给出了答案和解析,基本上可以保证你能应付面试官关于JS的提问。

小陈的博客 1602

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

HTML常用表单总结

表单的概念:表单是用来采集用户的输入数据,然后将数据提交给服务器 一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用程序的URL以及数据提交到服务器的方法。 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮:包括提交按钮、复位按钮和一般按钮; 表单基本框架 <form action="" method=""> <input type="" name="" id="" value="" /> &l

weixin_44309299的博客 1355

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

web工程的表单(Form)和代码架构格式详解

web编程的表单

qq_41043166的博客 1118

html表单自动提交表单提交表单数据类型,表单

表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。中文名表单...

weixin_39849153的博客 528

[开源]低代码表单FormCreate的control表单联动功能的详解

低代码表单提供了强大的组件联动功能,通过control配置项实现组件的加载、显示、禁用和必填等状态控制。在表单开发中,经常需要实现组件之间的联动行为,例如当某个输入框的值满足特定条件时,动态显示或隐藏其他组件。

轻松搞定低代码 2205

html5中单选框被选中把值传给后台_HTML5 + CSS3 >>> 007

表单标签(重点):name属性表示为表单起的名字,这个很重要,由于一个页面中有可能有很多个表单,比如有一个搜索的表单,还有一个评论的表单,有这两个表单,我们将表单进行提交以后,那后台怎么知道这个数是搜索表单里面的数据,那个数据是评论的数据,那我们就可以通过表单的name属性进行区分。action属性表示哪个后台文件来处理我们表单的数据。method属性表示以什么的方式进行提交表单中填写的...

weixin_32394375的博客 1180

Bootstrap表单

1.表单的布局 垂直表单(默认),内联表单,水平表单 2.创建基本表单的步骤向父<form>元素添加role="form" 把标签和控件放在一个带有class.form-group的<div>中。这是获取最佳间距所必需的 向所有的文本元素<input> <textarea>和<select>添加class.form-control <form role="form"> <div class

遇见更好的自己 797
上一篇: 【php】三元表达式其实也可以套娃
下一篇: 《精通Git(第2版)》阅读笔记
十万猫毛
博客等级 码龄6年 15粉丝 15原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值