浅谈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 数组详解
Oct 10 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
May 02 Javascript
js实现简单的省市县三级联动效果实例
Feb 18 Javascript
AngularJS ng-bind-template 指令详解
Jul 30 Javascript
jQuery过滤选择器用法示例
Sep 12 Javascript
JavaScript 继承详解(六)
Oct 11 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 Javascript
react router 4.0以上的路由应用详解
Sep 21 Javascript
jquery写出PC端轮播图实例
Jan 26 jQuery
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
Vue-cli3简单使用(图文步骤)
Apr 30 Javascript
JS如何定义用字符串拼接的变量
Jul 11 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
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
浅析get与post的一些特殊情况
2014/07/28 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
人人网javascript面试题 可以提前实现下
2012/01/05 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
Js与下拉列表处理问题解决
2014/02/13 Javascript
php中给js数组赋值方法
2014/03/10 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
微信小程序实现顶部导航特效
2019/01/28 Javascript
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
2020/09/21 Javascript
javascript实现简单页面倒计时
2021/03/02 Javascript
python实现中文转换url编码的方法
2016/06/14 Python
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
Python基于生成器迭代实现的八皇后问题示例
2018/05/23 Python
超简单的Python HTTP服务
2019/07/22 Python
python游戏开发的五个案例分享
2020/03/09 Python
django配置app中的静态文件步骤
2020/03/27 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
Manduka官网:瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
什么是数据库锁?Oracle中都有哪些类型的锁?
2015/08/21 面试题
学校节能减排方案
2014/06/13 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
2015年学校财务工作总结
2015/05/19 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书
导游词之太原天龙山
2020/01/02 职场文书
php png失真的原因及解决办法
2021/11/17 PHP