layui的复选框如何向后台传值

前言

使用layui复选框的时候需要向后台传递值，值的形式为逗号分割的形式。如下图需要选择多个条件。

方法

layui的前端样式代码如下

      <div class="layui-form-item">
        <label class="layui-form-label">复选框</label>
        <div class="layui-input-block">
            <input type="checkbox" name="level"   value="1" title="一级">
            <input type="checkbox" name="level"   value="2" title="二级">
            <input type="checkbox" name="level"   value="3" title="三级">
            <input type="checkbox" name="level"   value="4" title="四级">
            <input type="checkbox" name="level"   value="5" title="五级">
        </div>
    </div>

向后台传值

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

    var form = layui.form;
    var $ = layui.jquery

    //监听提交
    form.on('submit(form)', function (data) {

        if ($("input:checkbox[name='level']:checked").length == 0) {
            return;
        }
        //获取checkbox[name='level']的值，获取所有选中的复选框，并将其值放入数组中
        var arr = new Array();
        $("input:checkbox[name='level']:checked").each(function(i){
            arr[i] = $(this).val();
        });
        //  替换 data.field.level的数据为拼接后的字符串
        data.field.level = arr.join(",");//将数组合并成字符串


        layer.confirm('是否保存？', {
            btn: ['确定', '取消'] //按钮
        }, function () {
            $.post("modify"
                , data.field
                , function (res) {
                    if (res.success == true) {
                        parent.layer.close(index);
                    }
                }
            )
        }, function () {
            parent.layer.close(index);
        });

    });
    return false;
});

通过ajax向后台传递参数即可，最后数据库接收的数据形式类似如下：