浅谈layui 表单元素的选中问题
作者：剑雪封喉r 发布时间：2024-07-09 08:29:22
标签：layui,表单,元素,选中
layui对表单元素都作了美化,比如下拉列表,单选框,多选框.对表单美化后相应元素的操作,其实是在layui处理过后的div上操作,不能真的反映在原始我们编写的表单的元素上.这也会出现一个问题,如果想用JS对表单做些预处理,怎么做?操作原始的元素并不会展现在layui处理过的表单中的,那我们就对layui处理过的表单动手
这里要提两个我用过的,一个是单选框,一个是下拉列表
* 单选框,layui美化后,对应的type=radio的input项隐藏,在input之后追加了一个div,里面用i标签美化,所以我们需要做的事找到目标单选框的临近i标签,然后触发它的click事件
* 下拉框,layui把下拉框美化成了一个dl,每一个option标签都变成了一个dd标签表示,其中value更改为lay-value属性,我们要做的就是找到下拉框对应的dl标签,将符合要求值lay-value的dd的click事件触发
完整代码：
<!DOCTYPE html>
<html>
<!-- 防止IE提示允许阻止的内容-->
<!-- saved from url=(0014)about:internet -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>layui-form下单选框的监听问题</title>
<link rel="stylesheet" type="text/css" href="layui.css" rel="external nofollow" >
<script src="jquery.js" type="text/javascript"></script>
<script src="layui.js" type="text/javascript"></script>
<style>
.layui-form #layer-photos img {
max-width: 200px;
}
.layui-form .industryCheckbox li {
float: left;
width: 33％;
}
</style>
</head>
<body>
<!--头部logo以及登录注册开始-->
<div class="boxWrap">
<p class="boxTitle">投资需求</p>
<div class="formWrap">
<form class="layui-form">
<!-- 左右两列左侧容器 -->
<div class="form-left">
<div id="openedDiv" class="layui-form-item">
<label class="layui-form-label"><span class="star">*</span>是否公开：</label>
<div class="layui-input-block">
<input type="radio" name="opened" value="0" title="是">
<input type="radio" name="opened" value="1" title="否" checked="">
</div>
</div>
</div>
<div class="layui-form-item clearfix">
<div class="layui-input-block buttonWrap">
<button class="layui-btn" lay-submit lay-filter="*"> 提 交
</button>
<button type="button" lay-close class="layui-btn layui-btn-primary closeBtn"> 关 闭 </button>
</div>
</div>
</form>
</div>
</div>
<script>
$(function () {
//原始监听事件开始
// $(":radio[name='opened']").click(function () {
// console.log("1111111");
// });
//原始监听事件结束
//现在监听事件开始 $("#openedDiv div i").click(function () { var open_check_value = $("input[name='opened']:checked").val() console.log(open_check_value); }); //现在监听事件结束
//验证是否会影响form表单的正常提交
layui.use('form', function () {
var form = layui.form;
form.on('submit(*)', function (data) {
console.log("submit");
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
});
});
</script>
</body>
</html>
来源：https://blog.csdn.net/u010682330/article/details/78296027
0
投稿猜你喜欢
Spring事务管理事务（Transaction），一般是指要做的或所做的事情。在计算机术语中是指访问并可能更新数据库中各种数据项的一个程序- JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，它使得人们很容易的进行阅读和编写。同时也方便了
- 介绍我们可以通过控制HeaderStyle, RowStyle, AlternatingRowStyle和其他一些属性来改变GridView
- 根据代码中运行的结果来看，主要由以下几种:1. sum()：将array中每个元素相加的结果2. axis对应的是维度的相加。比如：1、ax
- CSS2.1 中规定了关于 CSS 规则 Specificity（特异性）的计算方式，用一个四位的数
- 变量的缓存机制变量的缓存机制（以下内容仅对python3.6.x版本负责）机制只要有两个值相同，就只开辟一个空间为什么要有这样的机制在计算机
- 经常由于各种压缩格式的不一样用到文件的解压缩时就需要下载不同的解压缩工具去处理不同的文件，以至于桌面上的压缩工具就有三四种，于是使用pyth
- Python 爬虫之超链接 url中含有中文出错及解决办法python3.5 爬虫错误：UnicodeEncodeError: 'a
- 最近一直在用TF做CNN的图像分类，当softmax层得到预测结果后，我希望能够看到预测结果，以便和标签之间进行比较。特此补上，以便自己记忆
- 多版本并发控制Multiversion Concurrency Control大部分的MySQL的存储 引擎，比如InnoDB，Falcon
- 本篇博文主要讲解Python爬虫实例，重点包括爬虫技术架构，组成爬虫的关键模块：URL管理器、HTML下载器和HTML解析器。爬虫简单架构程
- 本文对于先前系列文章中实现的C/Python代码统计工具(CPLineCounter)，通过C扩展接口重写核心算法加以优化，并与网上常见的统
- 酝酿了将近一个春夏秋冬的腾讯网首页终于亮剑！反响热烈！让我们来分享它成功背后的酸甜苦辣吧。腾讯网首页改版终于开花结果。于2008年3月25日
- 数据采集我们上一篇介绍了，如何采集王者皮肤，买不起皮肤，当个桌面壁纸挺好的。我们今天来学习如何采集电影评论，看看这个电影好不好看。发送请求我
- 核心代码：#!/usr/bin/python#Filename:friendbook.pyimport cPickle as pimport
- 最近在做学院的选课系统时，在分页上被卡壳了一下，因为需要用到排序，所以不能像以前一样用一个自动递增的字段作为主键，然后仅仅是对这个主键来做统
- 摘要主要是介绍python 的回调函数callback。什么是回调函数当程序运行是，一般情况下，应用程序会时常通过API调用库里所预先备好的
- MySQL窗口函数简介MySQL从8.0开始支持窗口函数，这个功能在大多商业数据库和部分开源数据库中早已支持，有的也叫分析函数。什么叫窗口?
- 一 、MySQL版本查询1)登录mysql首先Window+R然后在命令行里输入mysql -u此处填你的mysql账号（注意要加-u) -
- 需求小编通常会上一些专业的视频网站比如腾讯视频、优酷，在上面看电影、电视剧。这些网站有个优点，可以缓存视频，在通勤路上比如地铁就可以愉快的刷
