获取layui表单复选框已选中的数据

HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>layui.form.checkbox 获取选中</title>

<link rel="stylesheet" href="layui/css/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="checkbox" name="CSDN" lay-filter="like" title="复选框一" value="dongsir">

      <input type="checkbox" name="CSDN" lay-filter="like" title="复选框二" value="董先生">

    </div>

  </div>

  <div class="layui-form-item">

    <label class="layui-form-label">开关关</label>

    <div class="layui-input-block">

      <input type="checkbox" name="switch" lay-skin="switch" value="董辉">

    </div>

  </div>

  <div class="layui-form-item">

    <label class="layui-form-label">开关开</label>

    <div class="layui-input-block">

      <input type="checkbox" name="switch" checked lay-skin="switch" value="董先生的CSDN">

    </div>

  </div>

  <div class="layui-form-item">

    <div class="layui-input-block">

      <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>

    </div>

  </div>

</form>

<script src="layui/layui.js"></script>

JS

layui.use('form', function(){

  var form = layui.form,

  $ = layui.$;

  //各种基于事件的操作。

  form.on('submit(*)', function(data){

    //将页面全部复选框选中的值拼接到一个数组中

    var arr_box = [];

    $('input[type=checkbox]:checked').each(function() {

      arr_box.push($(this).val());

    });

    //数组

    console.log(arr_box);

    // ["董先生的CSDN"]

    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。

  });

});

如果需要字符串的话，再将数组转为字符串

console.log(arr_box.toString());

// dongsir,董先生,董先生的CSDN

如果需要自定义分割字符的字符串

console.log(arr_box.join(","));

// dongsir,董先生,董先生的CSDN

layui获取checkbox复选框值的更多相关文章

  1. php checkbox复选框值的获取与checkbox默认值输出方法

    php获取 checkbox复选框值的方法,checkbox在php读取值时要用数组形式哦,我们读取这些值用php post获取是以一个array形式哦. php获取 checkbox复选框值的方法 ...

  2. Web版需求征集系统所得1，servlet中获取checkbox复选框的值

    servlet中获取checkbox复选框的值 </tr> <tr> <td align="right">研究类型</td> < ...

  3. php获取checkbox复选框的内容

    php获取checkbox复选框的内容   由于checkbox属性,所有必须把checkbox复选择框的名字设置为一个如果checkbox[],php才能读取,以数据形式,否则不能正确的读取chec ...

  4. js获取checkbox复选框获取选中的选项

    js获取checkbox复选框获取选中的选项 分享下javascript获取checkbox 复选框获取选中的选项的方法. 有关javascript 获取checkbox复选框的实例数不胜数.js实现 ...

  5. php怎么获取checkbox复选框的内容？

    由于checkbox属性,所有必须把checkbox复选择框的名字设置为一个如果checkbox[],php才能读取,以数据形式,否则不能正确的读取checkbox复选框的值哦. <form n ...

  6. 获取checkbox复选框的值

    <title>CheckBox</title> <script type = "text/javascript"> doGetVal: func ...

  7. 前端获取checkbox复选框的值 通过数组形式传递

    html代码: <form role="form" class="select_people"> <div style="displ ...

  8. js操作checkbox(复选框)的方法总结

    收集了一些用js代码操作checkbox复选框的代码,分享出来,供需要的朋友参考: <script> //复选框checkbox 处理方法 //搜集整理 www.jbxue.com fun ...

  9. jQuery分别获取选中的复选框值

    function jqchk(){  //jquery获取复选框值   var s='';   $('input[name="aihao"]:checked').each(func ...

随机推荐

  1. Consul作为配置中心，配置Asp.Net Core应用程序

    前言 最近项目逐步转向基于.Net Core,目前dotnet core 虽然已出3.0了但还没有特别成熟的框架,要实现微服务,必须要解决配置中心的问题 .不管是不是微服务,节点多了配置文件一个个更改 ...

  2. ansible 流程控制

    ansible 流程控制 使用when判断主机名 - hosts: rsync_server tasks: - name: Install rsyncd Server yum: name: rsync ...

  3. Oracle 11gR2 RAC网络配置，更改public ip、vip和scanip

    Oracle 11gR2 RAC网络配置,更改public ip.vip和scanip 转载黑裤子 发布于2018-10-30 01:08:02 阅读数 2898  收藏 展开 转载. https:/ ...

  4. java8 的files、path类相关文件遍历API

    Path的两种初始化(应该还有别的方式) Path file = new File(path).toPath(); Paths.get 判断是文件.是目录 Files.isRegularFile(fi ...

  5. Java编译器的2点优化

    优化1 对于byte/short/char三种类型来说,如果右侧赋值的数值没有超过范围,那么javac编译器将会自动隐含地为我们补上一个(byte)(short)(char). 如果没有超过左侧的范围 ...

  6. SQL查询--内连接、外连接、自连接查询

    先创建2个表:学生表和教师表   1.内连接: 在每个表中找出符合条件的共有记录.[x inner join y on...] 第一种写法:只用where SELECT t.TEACHER_NAME, ...

  7. webpack入门配置步骤详解

    1.初始化 1.npm install webpack webpack-cli webpack-dev-server --g 全局安装必要的第三方插件 2.mkdir config dist src ...

  8. 08-蓝图&单元测试

    学习目标 能够使用代码实现蓝图对项目进行模块化 能够说出断言的作用 能够说出实现单元测试步骤 能够说出单元测试所执行方法的定义规则 Blueprint(蓝图) 随着flask程序越来越复杂,我们需要对 ...

  9. allure定制化输出测试报告，让报告锦上添花！

    一.定制化后的效果展示 用两张图展示效果: 二.注意别踩坑 allure定制化想必大部分情况都会去选择pip install pytest-allure-adaptor这个插件,安装完成后,运行定制化 ...

  10. C# 如何添加自定义键盘处理事件 如何配置app.config ? | csharp key press event tutorial and app.config

    本文首发于个人博客https://kezunlin.me/post/9f24ebb5/,欢迎阅读最新内容! csharp key press event tutorial and app.config ...