获取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. linux下挂载iso镜像文件

    linux挂载iso镜像可以分为两种,直接挂载镜像和上传镜像文件至服务器进行挂载 一.虚拟机镜像挂载 测试时使用虚拟机,此时可以直接在虚拟机的设置中将镜像文件直接选择并进行挂载,无需上传至虚拟机服务器 ...

  2. python2 和 python3共存的常见使用（如安装虚拟环境的问题）

    1.安装好python2和python3,配置好全部环境变量 环境变量修改后,需要重新启动命令行才有效 2.如何启动不同版本的python 启动的时候会执行python.exe,python2和pyt ...

  3. 3-SQL过滤

    # 筛选最大生命值大于6000,最大法力值大1700的英雄,然后按照二者之和从高到低进行排序 SELECT NAME     ,     hp_max,     mp_max  FROM     he ...

  4. Delphi 任务栏中不显示窗口

    目的: 1. 窗口不在任务栏显示. 2. 窗口不显示在Alt+Tab的切换列表中. 3. 在任务管理器的应用程序列表中不显示. 示例: type TAppWndBrowser = class( TFo ...

  5. 学习笔记：Django开发网上教育平台(参考了慕课网的教学视频)

    第一步:进行环境的搭建(用到的IDE:pycharm  ,数据库为mysql.nacicat.编辑语言python3.7.以及自己配置的虚拟环境venvpy37) Django==2.2​ ​ 配置好 ...

  6. 整理几个经常在H5移动端开发遇到的东西。

    本篇主要是我个人的学习分享. 1.弹出数字键盘 <!-- 有“#” “*” 符号输入 --> <input type="tel"> <!-- 纯数字 ...

  7. JavaScript中随机打乱一个数组

    JavaScript中随机打乱一个数组 function shuffle(arr) { let i = arr.length; while (i) { let j = Math.floor(Math. ...

  8. 关于scanf的一些知识

    10.22,对现阶段已知道的scanf的一些用法或注意事项的一些总结: 1.scanf中,赋值的那个数据前面一定加&! 2.若情景要求必须输入空格的,scanf("%d%c%d&qu ...

  9. COM 编程基础

    DirectX 采用了 COM 标准.而 DirectShow 是一套完全基于 COM 的应用系统.要想深入学习 DirectShow,掌握一些 COM 编程的基础知识是必不可少的. 一.COM 是什 ...

  10. 通过组件实现相同group下字符串拼接

    实现效果 组件处理流程如下:         1 使用Sorter组件对ColA进行排序       2 使用expression组件进行如下配置 3 使用aggregate组件进行如下配置 ColA ...