layui获取复选框checked值

你的名字 2023-07-25 05:30 13阅读 0赞

## 前言 ##

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

## 解决方案 ##

//监听提交
    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,`，当然，不足的地方没有去掉最后一个逗号，晚点修复，功能目前是足够的。