• layui获取checkbox复选框值


    获取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
    
  • 相关阅读:
    推荐电影 迪士尼经典动画片大全 1937-2008
    推荐电影 奥黛丽赫本的十大经典电影 1953-1989
    生活娱乐 ATM机键盘余温泄露密码
    生活娱乐 Wifi机器人的制作流程
    生活娱乐 WIFI机器人(某机器发烧友自己动手做一台)
    电脑技巧 ADSL如何远程盗号
    生活娱乐 VERYCD的T恤设计大赛
    系统重装 如何在固态硬盘上重装系统
    Visual Studio VS如何统计代码行数
    解决启动nginx时报80端口被占用的问题
  • 原文地址:https://www.cnblogs.com/sirdong/p/11579485.html
Copyright © 2020-2023  润新知