浅谈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 相关文章推荐
JavaScript 获得选中文本内容的方法
Feb 15 Javascript
用Jquery实现多级下拉框无刷新的联动
Dec 22 Javascript
javascript 正则表达式相关应介绍
Nov 27 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
react实现菜单权限控制的方法
Dec 11 Javascript
浅谈es6中export和export default的作用及区别
Feb 07 Javascript
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
JavaScript 继承 封装 多态实现及原理详解
Jul 29 Javascript
vue实现短信验证码输入框
Apr 17 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
加速XP搜索功能堪比vista
2007/03/22 PHP
一个漂亮的php验证码类(分享)
2013/08/06 PHP
PHP把MSSQL数据导入到MYSQL的方法
2014/12/27 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
js报错 Object doesn't support this property or method的原因分析
2011/03/31 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
告诉你什么是javascript的回调函数
2014/09/04 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
vue使用Axios做ajax请求详解
2017/06/07 Javascript
浅谈nodejs中的类定义和继承的套路
2017/07/26 NodeJs
vue+express 构建后台管理系统的示例代码
2018/07/19 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
vue项目中引入Sass实例方法
2019/08/27 Javascript
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
Python内存管理实例分析
2019/07/10 Python
Python 删除List元素的三种方法remove、pop、del
2020/11/16 Python
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
瑞典领先的汽车零部件网上零售商:bildelaronline24.se
2017/01/12 全球购物
Snapfish英国:在线照片打印和个性化照片礼品
2017/01/13 全球购物
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
自荐信包含哪些内容
2013/10/30 职场文书
应届毕业生求职信范文分享
2013/12/26 职场文书
银行纠风工作实施方案
2014/06/08 职场文书
领导干部作风整顿剖析材料
2014/10/11 职场文书
走近毛泽东观后感
2015/06/04 职场文书
python 标准库原理与用法详解之os.path篇
2021/10/24 Python
i7 6700处理器相当于i5几代
2022/04/19 数码科技