获取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. [转]uipath team svn

    本文转自:https://docs.uipath.com/studio/docs/svn-version-control SVN Version Control Suggest Edits Openi ...

  2. Android 视频播放器 (四)：使用ExoPlayer播放视频

    一.简介 ExoPlayer是一个Android应用层的媒体播放器,它提供了一套可替换Android MediaPlayer的API,可以播放本地或者是线上的音视频资源.ExoPlayer支持一些An ...

  3. TP5 ajax请求报500错误

    场景:几个站点从阿里云迁移到腾讯云,然后 TP5项目 ajax请求报500错误 数据返回成功,但是http状态码是500,不走success,一直走error 如下图: 原因分析: 服务器centos ...

  4. Linux系统学习 三、网络基础—虚拟机网络配置

    Linux网络基础 Linux的ip地址配置 Linux网络配置文件 常用网络命令 虚拟机网络参数配置 1.配置Linux的IP地址 首先配置一个IP地址,让IP生效. ifconfig查看当前网络配 ...

  5. Codeforces Round #601 (Div. 2)

    传送门 A. Changing Volume 签到. Code /* * Author: heyuhhh * Created Time: 2019/11/19 22:37:33 */ #include ...

  6. 【poj1430】Binary Stirling Numbers（斯特林数+组合数）

    传送门 题意: 求\(S(n,m)\% 2\)的值,\(n,m\leq 10^9\),其中\(S(n,m)\)是指第二类斯特林数. 思路: 因为只需要关注奇偶性,所以递推式可以写为: 若\(m\)为偶 ...

  7. WPF Datagrid 控制 第一行和第一列之间的空白

    原文:WPF Datagrid 控制 第一行和第一列之间的空白 这个位置就是 这里 我们更改 DataGridControltemplate 模板 看树形结构 里面是一个BUtton 功能是全选 能找 ...

  8. 实例调用(__call__())

    任何类,只需要定义一个__call__()方法,就可直接对实例进行调用 对实例进行直接调用就好比对一个函数进行调用一样 __call__()还可定义参数,所以调用完全可以把对象看成函数,把函数看成对象 ...

  9. Promise如何解决回调地狱

    为什么要有promise:解决(回调地狱)的问题 ### 回调地狱: ```js //跟以前的if条件地狱很像 // if(){ // if(){ // if(){ // } // } //} $.g ...

  10. Springboot访问静态资源&WebJars&图标&欢迎页面

    目录 概述 1.访问WebJar资源 2.访问静态资源 3.favicon.ico图标 4.欢迎页面 概述 使用Springboot进行web开发时,boot底层实际用的就是springmvc,项目中 ...