欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

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

时间:2020-12-28 11:55:08|栏目:JavaScript代码|点击:

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="*">&nbsp;&nbsp;提&nbsp;&nbsp;&nbsp;交&nbsp;&nbsp;
          </button>
          <button type="button" lay-close class="layui-btn layui-btn-primary closeBtn">&nbsp;&nbsp;关&nbsp;&nbsp;&nbsp;闭&nbsp;&nbsp;</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>

上一篇:极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg

栏    目:JavaScript代码

下一篇:javascript中节点的最近的相关节点访问方法

本文标题:浅谈layui 表单元素的选中问题

本文地址:http://www.codeinn.net/misctech/37547.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有