浅谈layui 表单元素的选中问题


Posted in Javascript onOctober 25, 2019

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>

以上这篇浅谈layui 表单元素的选中问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS保留两位小数 四舍五入函数的小例子
Nov 20 Javascript
初识Javascript小结
Jul 16 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
Nov 25 Javascript
jquery插件jquery.confirm弹出确认消息
Dec 22 Javascript
js模拟百度模糊搜索的实例
Aug 04 Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
Jan 19 Javascript
微信小程序与公众号实现数据互通的方法
Jul 25 Javascript
解决layui表格内文本超出隐藏的问题
Sep 12 Javascript
细说webpack6 Babel的使用详解
Sep 26 Javascript
javascript实现动态时钟的启动和停止
Jul 29 Javascript
layUI的验证码功能及校验实例
Oct 25 #Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 #Javascript
详解node登录接口之密码错误限制次数(含代码)
Oct 25 #Javascript
Vue 用Vant实现时间选择器的示例代码
Oct 25 #Javascript
vue登录以及权限验证相关的实现
Oct 25 #Javascript
vue-next/runtime-core 源码阅读指南详解
Oct 25 #Javascript
JS实现简单tab选项卡切换
Oct 25 #Javascript
You might like
如何做到多笔资料的同步
2006/10/09 PHP
PHP实现变色验证码实例
2014/01/06 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
扩展String功能方法
2006/09/22 Javascript
很可爱的输入框
2008/08/03 Javascript
javascript tips提示框组件实现代码
2010/11/19 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
js编写的treeview使用方法
2016/11/11 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
2017/11/07 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
NodeJS使用Range请求实现下载功能的方法示例
2018/10/12 NodeJs
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
Python用GET方法上传文件
2015/03/10 Python
Python的requests网络编程包使用教程
2016/07/11 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
浅谈Pandas Series 和 Numpy array中的相同点
2019/06/28 Python
Python调用C语言的实现
2019/07/26 Python
通过selenium抓取某东的TT购买记录并分析趋势过程解析
2019/08/15 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
Django异步任务线程池实现原理
2019/12/17 Python
使用tensorflow DataSet实现高效加载变长文本输入
2020/01/20 Python
matlab、python中矩阵的互相导入导出方式
2020/06/01 Python
使用CSS3的ruby-position固定注音位置的用法示例
2016/07/05 HTML / CSS
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
大学生入党自我鉴定
2013/10/31 职场文书
医学院毕业生自荐信
2013/11/08 职场文书
《故乡》教学反思
2014/04/10 职场文书
中学教师师德承诺书
2014/05/23 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
初中生毕业评语
2014/12/29 职场文书
2015年客服工作总结范文
2015/04/02 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP