layui获取复选框checked值

前言

对于后台开发来讲，layui是一个很后台的前端框架，适合搭建管理后台，各方面都很好，唯独有个地方不好，就是checkbox多选方面，不能直接返回多选值，只能返回最后选的一个，这究竟是官方的bug还是有意为之我们也无从得知，原因是没有的，但是解决方案有。

解决方案

<div class="layui-form-item">
    <label class="layui-form-label required">角色</label>
    <div class="layui-input-block">
        <input type="checkbox" id="role101" name="roleId" value="101" title="员工">
        <input type="checkbox" id="role201" name="roleId" value="201" title="经理">
        <input type="checkbox" id="role301" name="roleId" value="301" title="管理层">
    </div>
</div>

//监听提交
form.on('submit(saveBtn)', function (data) {
	console.log(JSON.stringify(data.field));
	console.log(JSON.stringify(getCheckboxValues("RoleId")));
    var submitData = data.field;
    submitData ["RoleId"] = getCheckboxValues("RoleId");
    console.log(JSON.stringify(submitData));
    $.ajax({
        type: 'POST',
        url: "${request.contextPath}/xxxx/save",
        data:JSON.stringify(submitData),//.replace('"roleId":"9"','"roleId":"'+roleIds+'"').replace('"roleId":"5"','"roleId":"'+roleIds+'"'),
        dataType: "json",
        contentType: "application/json",
        success: function (responseData) {
            if (responseData.code === 200) {
                layer.msg(responseData.msg, function () {
                //finish
                });
            } else {
                layer.msg(responseData.msg, function () {
                //faild
                });
            }
        }
    });
    return false;
});

//将checkbox拼接为"value1,value2,value3" by zhengkai.blog.csdn.net
function getCheckboxValues(checkboxId) {
    var result = [];
    $("[id='" + checkboxId+ "']:checkbox").each(function () {
        result.push($(this).attr("title"));
    });
    return result.join(",");
};

提交后，控制台输出 101,201,301 或者101,201,，当然，不足的地方没有去掉最后一个逗号，晚点修复，功能目前是足够的。