当前位置: 首页 > news >正文

layui input 监听事件

//监听表单单选框复选框选择
form.on('radio', function (data) {
   console.log(data.value); //得到被选中的值
});
        
 
 
//监听表单下拉菜单选择
 form.on('select', function (data) {
   console.log(data.value); //得到被选中的值
});
 
 
 
//监听表单复选框选择
 form.on('checkbox', function (data) {
   console.log(data.value); //得到被选中的值
});
 
 
//监听表格复选框选择
table.on('checkbox(demo)', function (obj) {
   console.log(obj);
});
 
 
//layui监听input内容变动简单粗暴
$(function(){
   //输入框的值改变时触发
  $("#inputid").on("input",function(e){
    //获取input输入的值
    console.log(e.delegateTarget.value);
  });
});
 
//点击触发监听
$(document).on('click','.class',function(othis){
     var data = othis.currentTarget;
     data.remove();
     layer.msg('清除成功');
});

带注释

form.on('event(过滤器值)', callback);
 
//监听checkbox复选
form.on('checkbox(filter)', function(data){
    console.log(data.elem); //得到checkbox原始DOM对象
    console.log(data.elem.checked); //是否被选中,true或者false
    console.log(data.value); //复选框value值,也可以通过data.elem.value得到
    console.log(data.othis); //得到美化后的DOM对象
});
 
//监听switch复选
form.on('switch(filter)', function(data){
  console.log(data.elem); //得到checkbox原始DOM对象
  console.log(data.elem.checked); //开关是否开启,true或者false
  console.log(data.value); //开关value值,也可以通过data.elem.value得到
  console.log(data.othis); //得到美化后的DOM对象
}); 
 
//监听radio单选:
form.on('radio(filter)', function(data){
    console.log(data.elem); //得到radio原始DOM对象
    console.log(data.elem.dataset);//获取dataset参数
    console.log(data.value); //被点击的radio的value值
});
 
//监听submit提交:
<button lay-submit lay-filter="*">提交</button>
form.on('submit(*)', function(data){
    console.log(data.elem) //被执行事件的元素DOM对象,一般为button对象
    console.log(data.form) //被执行提交的form对象,一般在存在form标签时才会返回
    console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value}
    return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
});
 

监听Select的改变

<!-- 不用form 用div也可以 -->
<form class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">下拉选择框</label>
        <div class="layui-input-block">
            <select name="interest" lay-filter="aihao">
                <option value="0">写作</option>
                <option value="1">阅读</option>
                <option value="2">听歌</option>
                <option value="4">游戏</option>
            </select>
        </div>
    </div>
</form>
<script type="text/javascript" src="./layui/layui.js"></script>
<script type="text/javascript">
layui.use('form', function(){
    var form = layui.form;
    form.on('select(aihao)',function(data){
        console.log(data);
        console.log(data.elem); //得到select原始DOM对象
        console.log(data.value); //得到被选中的值
        console.log(data.othis); //得到美化后的DOM对象
        console.log(data.elem.dataset);//获取dataset参数
    });
});

相关文章:

layui input 监听事件

//监听表单单选框复选框选择 form.on(radio, function (data) { console.log(data.value); //得到被选中的值 }); //监听表单下拉菜单选择 form.on(select, function (data) { console.log(data.value); //得到被选中的值 }); //监听表单复选框选择 …...

一致性思维链(SELF-CONSISTENCY IMPROVES CHAIN OF THOUGHT REASONING IN LANGUAGE MODELS)

概要 思维链已经在很多任务上取得了非常显著的效果&#xff0c;这篇论文中提出了一种 self-consistency 的算法&#xff0c;来代替 贪婪解码 算法。本方法通过 采样多个思维链集合&#xff0c;然后LLM模型生成后&#xff0c;选择一个最一致的答案作为最后的结果。一致性思维链…...

腾讯云16核服务器配置大全_16核CPU型号性能测评

腾讯云16核CPU服务器有哪些配置可以选择&#xff1f;可以选择标准型S6、标准型SA3、计算型C6或标准型S5等&#xff0c;目前标准型S5云服务器有优惠活动&#xff0c;性价比高&#xff0c;计算型C6云服务器16核性能更高&#xff0c;轻量16核32G28M带宽优惠价3468元15个月&#xf…...

HTML中Input elements should have autocomplete attributes的解决方案

kwfwservice.php:1 [DOM] Input elements should have autocomplete attributes (suggested: “current-password”): (More info: https://goo.gl/9p2vKq) <input name"password" id"password" lay-verify"required" placeholder"密码&…...

2808. 使循环数组所有元素相等的最少秒数;1015. 可被 K 整除的最小整数;1001. 网格照明

2808. 使循环数组所有元素相等的最少秒数 核心思想&#xff1a;枚举每个元素作为相等元素最多需要多少秒&#xff0c;然后维护它的最小值。最多需要多少秒是怎么计算的&#xff0c;我们可以把相等值的下标拿出来&#xff0c;然后你会发现两个相邻下标&#xff08;相邻下标只的…...

Python爬虫在Web应用自动化测试中的应用

在Web应用开发过程中&#xff0c;自动化测试是确保应用质量和稳定性的重要环节。本文将介绍如何使用Python爬虫与自动化测试技术相结合&#xff0c;实现对Web应用进行自动化测试的方法和步骤。通过这种结合&#xff0c;我们可以提高测试效率、减少人力成本&#xff0c;并确保应…...

苹果手机短信删除了怎么恢复?3种有效方法介绍

手机短信是一种即时通信方式&#xff0c;人们可以使用短信来达到快速传递信息的目的。在没有网络或者网络不稳定的时候&#xff0c;短信仍然可以做到发送和接收&#xff0c;这弥补了其他网络通信软件的缺点。 所以说&#xff0c;手机短信仍然是我们生活中不可缺少的一部分。当…...

前端JavaScript中的 == 和 ===区别,以及他们的应用场景,快来看看吧,积累一点知识。

&#x1f3ac; 江城开朗的豌豆&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 一、等于操作符 二、全等操作符 三、区别 小结 一、等于操作符 等于操作符用两个等于号&#xff08; &am…...

文献阅读:LIMA: Less Is More for Alignment

文献阅读&#xff1a;LIMA: Less Is More for Alignment 1. 内容简介2. 实验设计 1. 整体实验设计2. 数据准备3. 模型准备4. metrics设计 3. 实验结果 1. 基础实验2. 消解实验3. 多轮对话 4. 结论 & 思考 文献链接&#xff1a;https://arxiv.org/abs/2305.11206 1. 内容简…...

机器学习第十四课--神经网络

总结起来&#xff0c;对于深度学习的发展跟以下几点是离不开的: 大量的数据(大数据)计算资源(如GPU)训练方法(如预训练) 很多时候&#xff0c;我们也可以认为真正让深度学习爆发起来的是数据和算力&#xff0c;这并不是没道理的。 由于神经网络是深度学习的基础&#xff0c;学…...

React(react18)中组件通信04——redux入门

React&#xff08;react18&#xff09;中组件通信04——redux入门 1. 前言1.1 React中组件通信的其他方式1.2 介绍redux1.2.1 参考官网1.2.2 redux原理图1.2.3 redux基础介绍1.2.3.1 action1.2.3.2 store1.2.3.3 reducer 1.3 安装redux 2. redux入门例子3. redux入门例子——优…...

最新AI创作系统+ChatGPT网站源码+支持GPT4.0+支持ai绘画+支持国内全AI模型

一、AI创作系统 SparkAi系统是基于很火的GPT提问进行开发的Ai智能问答系统。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作ChatGPT系统&#xff1f;小编这里写一个详细图文教程吧&#x…...

react+umi项目中引入antd组件报错:“Button”不能用作 JSX 组件解决方案

具体报错信息 “Button”不能用作 JSX 组件。 Its type ‘(props: IProps) > React.ReactElement’ is not a valid JSX element type. 不能将类型“(props: IProps) > React.ReactElement”分配给类型“(props: any, deprecatedLegacyContext?: any) > ReactNode”。…...

常用算法模板

目录 快读、快输 快读、快输 #include <cstdio> #define Re register int #define LD double// 读整数 inline void in(Re &x) {int f 0; x 0; char c getchar();while (c < 0 || c > 9) f | c -, c getchar();while (c > 0 && c < 9) x …...

最全跨境独立站建站详细步骤解析

对于跨境电商卖家来说&#xff0c;无论是规避“鸡蛋放在同一个篮子里”的风险&#xff0c;还是追求更多的销售额和利润&#xff0c;多平台、多站点的布局都是其至关重要的战略。加之市场的变化带来了新的发展机遇&#xff0c;这也使得如今很多出海企业都在抢占独立站新风口。然…...

提升群辉AudioStation音乐体验,实现公网音乐播放

文章目录 本教程解决的问题是&#xff1a;按照本教程方法操作后&#xff0c;达到的效果是本教程使用环境&#xff1a;1 群晖系统安装audiostation套件2 下载移动端app3 内网穿透&#xff0c;映射至公网 很多老铁想在上班路上听点喜欢的歌或者相声解解闷儿&#xff0c;于是打开手…...

虹科分享 | 谷歌Vertex AI平台使用Redis搭建大语言模型

文章来源&#xff1a;虹科云科技 点此阅读原文 基础模型和高性能数据层这两个基本组件始终是创建高效、可扩展语言模型应用的关键&#xff0c;利用Redis搭建大语言模型&#xff0c;能够实现高效可扩展的语义搜索、检索增强生成、LLM 缓存机制、LLM记忆和持久化。有Redis加持的大…...

VS Code 代码跳转到定义(.js 和 .vue文件跳转)

vscode 代码跳转到定义&#xff08;.js 和 .vue文件跳转&#xff09; 在日常的开发工作中&#xff0c;我们经常需要跳转到方法或变量的定义处&#xff0c;以便更好地理解和修改代码。VS Code 是目前比较流行的开发工具&#xff0c;然而它默认情况下并不支持这个功能&#xff0c…...

华为云云耀云服务器L实例评测 | Docker 部署 Reids容器

文章目录 一、使用Docker部署的好处二、Docker 与 Kubernetes 对比三、云耀云服务器L实例 Docker 部署 Redis四、可视化工具连接Redis⛵小结 一、使用Docker部署的好处 Docker的好处在于&#xff1a;在不同实例上运行相同的容器 Docker的五大优点&#xff1a; 持续部署与测试…...

聚观早报 | 杭州亚运开幕科技感拉满;腾讯官宣启动「青云计划」

【聚观365】9月25日消息 杭州亚运开幕科技感拉满 腾讯官宣启动「青云计划」 FF任命新全球CEO 比亚迪夺得多国销冠 iPhone 15/15 Pro销售低于预期 杭州亚运开幕科技感拉满 杭州第19届亚洲运动会开幕式23日晚在杭州奥体中心主体育馆举行&#xff0c;这届开幕式可谓科技感拉…...

如何用douyin-downloader免费批量下载抖音视频:完整指南

如何用douyin-downloader免费批量下载抖音视频&#xff1a;完整指南 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback sup…...

碧蓝航线自动化工具使用指南

碧蓝航线自动化工具使用指南 【免费下载链接】AzurLaneAutoScript Azur Lane bot (CN/EN/JP/TW) 碧蓝航线脚本 | 无缝委托科研&#xff0c;全自动大世界 项目地址: https://gitcode.com/gh_mirrors/az/AzurLaneAutoScript 一、工具概述 碧蓝航线自动化工具是一款功能强…...

WuliArt Qwen-Image Turbo实战:快速生成赛博朋克壁纸,效果惊艳

WuliArt Qwen-Image Turbo实战&#xff1a;快速生成赛博朋克壁纸&#xff0c;效果惊艳 1. 引言&#xff1a;当AI绘画遇见赛博朋克 你是否曾经幻想过&#xff0c;只需输入一段文字描述&#xff0c;就能立即获得一张充满未来感的赛博朋克风格壁纸&#xff1f;过去&#xff0c;这…...

Pixel Dimension Fissioner 商业设计案例:为品牌生成动态视觉识别系统素材

Pixel Dimension Fissioner 商业设计案例&#xff1a;为品牌生成动态视觉识别系统素材 1. 动态视觉识别的数字革命 当品牌视觉从静态纸张跃入数字屏幕&#xff0c;传统VI手册里的规范条款突然显得力不从心。去年某国际饮料品牌做过一项调研&#xff1a;在Instagram上&#xf…...

千问3.5-9B镜像+OpenClaw:10分钟搭建云端自动化测试环境

千问3.5-9B镜像OpenClaw&#xff1a;10分钟搭建云端自动化测试环境 1. 为什么选择云端部署OpenClaw 去年我在本地折腾OpenClaw时&#xff0c;光是解决Python环境冲突就花了两天时间。最近发现星图平台提供了千问3.5-9B和OpenClaw的预置镜像组合&#xff0c;实测从创建实例到运…...

基于Uniapp + SpringBoot + Vue的智能停车场管理系统(角色:用户、员工、管理员)

文章目录前言一、详细操作演示视频二、具体实现截图三、技术栈1.前端-Vue.js2.后端-SpringBoot3.数据库-MySQL4.系统架构-B/S四、系统测试1.系统测试概述2.系统功能测试3.系统测试结论五、项目代码参考六、数据库代码参考七、项目论文示例结语前言 &#x1f49b;博主介绍&#…...

OpenClaw隐私保护方案:Qwen3-14b_int4_awq本地化数据处理优势

OpenClaw隐私保护方案&#xff1a;Qwen3-14b_int4_awq本地化数据处理优势 1. 为什么我们需要关注AI自动化中的隐私问题 去年我帮朋友的公司评估一个自动化方案时&#xff0c;遇到一个典型场景&#xff1a;他们需要处理大量客户合同&#xff0c;但担心使用云端AI服务会导致敏感…...

Linux系统下VMware虚拟机磁盘空间扩展实战:从40G到60G的详细步骤

Linux系统下VMware虚拟机磁盘空间扩展实战&#xff1a;从40G到60G的详细步骤 当你在Linux环境中使用VMware虚拟机时&#xff0c;磁盘空间不足可能是最令人头疼的问题之一。尤其是当根目录即将耗尽空间时&#xff0c;系统性能会急剧下降&#xff0c;甚至导致关键服务崩溃。作为一…...

OpenClaw+SecGPT-14B组合方案:5步搭建个人安全运营中心

OpenClawSecGPT-14B组合方案&#xff1a;5步搭建个人安全运营中心 1. 为什么需要个人安全运营中心 去年我的家庭实验室遭遇了一次未遂的入侵尝试。当时我正在外地出差&#xff0c;NAS上的异常登录提醒被淹没在几百条通知里。这件事让我意识到&#xff1a;安全监控不能只依赖碎…...

无线通信开发者的硬件加速指南:在Vivado里用System Generator快速搭建信道仿真原型

无线通信硬件加速实战&#xff1a;从Simulink到FPGA的信道仿真全流程解析 在当今5G/6G通信、物联网和自动驾驶技术快速发展的背景下&#xff0c;无线通信系统的复杂度和性能要求呈指数级增长。传统基于通用处理器的软件仿真方法已难以满足实时性要求&#xff0c;而FPGA凭借其并…...