浅谈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 AspxButton的客户端操作
Jun 26 Javascript
javascript不可用的问题探究
Oct 01 Javascript
document节点对象的获取方式示例介绍
Dec 24 Javascript
jquery判断元素是否隐藏的多种方法
May 06 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
Dec 01 Javascript
js制作支付倒计时页面
Oct 21 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
Node.js 使用命令行工具检查更新
Jun 08 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 Javascript
vue-router重定向不刷新问题的解决
Jun 25 Javascript
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
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
php设计模式 Visitor 访问者模式
2011/06/28 PHP
使用PHP接收POST数据,解析json数据
2013/06/28 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
PHP基于yii框架实现生成ICO图标
2015/11/13 PHP
joomla组件开发入门教程
2016/05/04 PHP
PHP巧妙利用位运算实现网站权限管理的方法
2017/03/12 PHP
jquery绑定原理 简单解析与实现代码分享
2011/09/06 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
jQuery自制提示框tooltip改进版
2016/08/01 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
vue高德地图之玩转周边
2017/06/16 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
2018/03/01 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
微信小程序实现banner图轮播效果
2020/06/28 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
2019/07/20 Javascript
微信小程序全选多选效果实现代码解析
2020/01/21 Javascript
JavaScript实现简易聊天对话框(加滚动条)
2020/02/10 Javascript
Python 初始化多维数组代码
2008/09/06 Python
关于Python如何避免循环导入问题详解
2017/09/14 Python
使用WingPro 7 设置Python路径的方法
2019/07/24 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
从一次项目重构说起CSS3自定义变量在项目的使用方法
2021/03/01 HTML / CSS
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
英文版餐饮运营管理求职信
2013/11/06 职场文书
单位创先争优活动方案
2014/01/26 职场文书
新学期教师寄语
2014/04/02 职场文书
525心理健康活动总结
2015/05/08 职场文书
高中信息技术教学反思
2016/02/16 职场文书
《我的长生果》教学反思
2016/02/20 职场文书
Java数组与堆栈相关知识总结
2021/06/29 Java/Android