获取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. 简单快速上手Jackson使用

    1简介 Jackson具有比较高的序列化和反序列化效率,据测试,无论是哪种形式的转换,Jackson > Gson > Json-lib,而且Jackson的处理能力甚至高出Json-li ...

  2. Linux下使用 github+hexo 搭建个人博客01-hexo搭建

    为什么要搭建自己的博客系统? 原因有好几个吧,归类如下:1.自己搭建博客系统很有成就感,可以自己选定页面风格和页面排版: 2.自己搭建博客系统可以根据自己的需要添加各种插件功能,因此整体上比网上的第三 ...

  3. Django 模板变量之 forloop

    1. 模板变量之forloop.counter:从1开始自增1 模板代码如下: {% for row in v %} <tr> <td>{{forloop.counter}}& ...

  4. android 完全区分double-tap 与 singal-tap 的方法

    需求:viewpager显示图片,需要在双击时对图片进行缩放,单击时在屏幕下方弹出popwindow,由于android的双击本质就是两次单击,但是又不想在双击时触发单击时的动作,所以就在网上各种搜解 ...

  5. 机器学习--K近邻 （KNN）算法的原理及优缺点

    一.KNN算法原理 K近邻法(k-nearst neighbors,KNN)是一种很基本的机器学习方法. 它的基本思想是: 在训练集中数据和标签已知的情况下,输入测试数据,将测试数据的特征与训练集中对 ...

  6. day87_11_7微信小程序之登录，支付（获取ip，requests使用），授权

    一.登录接口. 官方文档https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html 在登录接口 ...

  7. AcWing 28. 在O(1)时间删除链表结点

    地址 https://www.acwing.com/problem/content/description/85/ 题目描述给定单向链表的一个节点指针,定义一个函数在O(1)时间删除该结点. 假设链表 ...

  8. Java流程控制之选择语句

    选择语句 选择语句也称之为判断语句,主要有2种写法,一种是if语句,一种是switch语句.下面我们就详细的介绍一下这2种语句的用法. 判断语句if if语句第一种形式: if 格式: 执行流程 首先 ...

  9. 【51nod1678】lyk与gcd（莫比乌斯反演+枚举因数）

    点此看题面 大致题意: 一个长度为\(n\)的数组,实现两种操作:单点修改,给定\(i\)求\(\sum_{j=1}^na_j[gcd(i,j)=1]\). 莫比乌斯反演 考虑推一推询问操作的式子: ...

  10. php程序内存优化之数组操作优化

    一.前言这篇文章其实是上篇文章的内存优化部分.博主的php程序在执行的时候,报错: Out of memory (allocated 364904448) (tried to allocate 262 ...