layui 表单模块事件触发，select事件触发，checkbox事件，switch事件，sunmit提交等等

最新推荐文章于 2024-03-27 12:34:06 发布

原创最新推荐文章于 2024-03-27 12:34:06 发布 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

王锡豪

文章标签：

#layui #javascript #ui

前端总结（es6 vue layui ）专栏收录该内容

21 篇文章

订阅专栏

这篇博客介绍了layui框架中表单模块的使用方法，包括基本的input、select、textarea等元素的渲染，以及如何通过添加class='layui-form'实现UI自动化。示例代码展示了下拉选择框的onselect事件，当选择项改变时触发回调，回调参数包含原始DOM对象、选中值和美化后的DOM对象。此外，还提供了完整的表单结构和按钮的提交、重置功能。layui.form模块简化了表单操作，使得前端开发更加便捷。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单模块文档:https://www.layuiweb.com/doc/modules/form.html#onselect

layui 针对各种表单元素做了较为全面的UI支持，你无需去书写那些 UI 结构，你只需要写 HTML 原始的 input、select、textarea 这些基本的标签即可。我们在 UI 上的渲染只要求一点，你必须给表单体系所在的父元素加上class=“layui-form”，一切的工作都会在你加载完form模块后，自动完成。如下是一个最基本的例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui.form小例子</title>
<link rel="stylesheet" href="layui.css" media="all">
</head>
<body>
<form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
  <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
      <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">下拉选择框</label>
    <div class="layui-input-block">
      <select name="interest" lay-filter="aihao">
        <option value="0">写作</option>
        <option value="1">阅读</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="写作">
      <input type="checkbox" name="like[read]" title="阅读">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关关</label>
    <div class="layui-input-block">
      <input type="checkbox" lay-skin="switch">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关开</label>
    <div class="layui-input-block">
      <input type="checkbox" checked lay-skin="switch">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="0" title="男">
      <input type="radio" name="sex" value="1" title="女" checked>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">请填写描述</label>
    <div class="layui-input-block">
      <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
  <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>
<script src="layui.js"></script>
<script>
layui.use('form', function(){
  var form = layui.form;
  
  //各种基于事件的操作，下面会有进一步介绍
});
</script>
</body>
</html>

触发select选择
下拉选择框被选中时触发，回调函数返回一个object参数，携带两个成员：

form.on('select(aihao)', function(data){
  console.log(data.elem); //得到select原始DOM对象
  console.log(data.value); //得到被选中的值
  console.log(data.othis); //得到美化后的DOM对象
});