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,，當然，不足的地方沒有去掉最後一個逗號，晚點修復，功能目前是足夠的。