layui复选框问题总结

问题：复选框在选中后新增和根据id修改对应复选框的问题

HTML：

<div class="layui-form-item">
    <label for="skill" class="layui-form-label">技能
    </label>
    <div class="layui-input-inline" id="skill" lay-filter="skill">
        <input type="checkbox" name="skill" title="写作" value="写作" lay-filter="skill"/>
        <input type="checkbox" name="skill" title="阅读" value="阅读" lay-filter="skill" checked/>
        <input type="checkbox" name="skill" title="发呆" value="发呆" lay-filter="skill" />
    </div>
</div>

提交：

form.on('submit(add)', function (data) {
    var skillArray = "";
    $("input[name='skill']:checked").each(function () {
        var value = $(this).val();
        skillArray = skillArray + value + ",";
    })
    var id = $("#id").val();
    var name = $("#name").val();
    var gender = $("input[name='gender']").val();
    var phone = $("#phone").val();
    // 提交表单
    _this.Commonmethod.ajax(
        Commonmethod().baseUrl().baseurl + '/api/oms/clerk/add',
        {
            "name": name,
            "id": id,
            "gender": gender,
            "phone": phone,
            "skill": skillArray
        },
        null,
        function (res) {
            var index = parent.layer.getFrameIndex(window.name);
            layer.alert("新增成功！", function () {
                layer.close(index);
                parent.location.reload();
            });
        }
    );
    return false;
});

修改：

首先根据id查询到单条记录，需要显示我复选框选中的内容（单选框同理）：

// 获取用户信息
_this.Commonmethod.ajax(
    Commonmethod().baseUrl().baseurl + '/api/oms/clerk/getClerkById',
    {id: $("#id").val()},
    null,
    function (res) {
        layui.use('form', function () {
            var form = layui.form;
            console.log(res.data);
            console.log(res.data.skill);
            $("#id").val(res.data.id);
            $("#name").val(res.data.name);
            $("#phone").val(res.data.phone);
            $("#gender").val(res.data.gender);
       //性别和技能分别是单选框和复选框，不能单纯的像其他字段一样查到后赋值，而应该查到有该内容，再让对应内容成为选中状态。
            var man = '男';
            if (res.data.gender.indexOf(man) >= 0) {
                $("input[name='gender']:eq(0)").prop("checked", "checked");
            };
            var women = '女';
            if (res.data.gender.indexOf(women) >= 0) {
                $("input[name='gender']:eq(1)").prop("checked", "checked");
            };
            var write = '写作';
            if (res.data.skill.indexOf(write) >= 0) {
                $("input[name='skill']:eq(0)").prop("checked", "checked");
                // alert('Yes');
                //这个是选中所有  其他全部不正确 搞了老半天   汗
                // $("input[name='skill']").prop("checked","checked");
            }
            ;
            var read = '阅读';
            if (res.data.skill.indexOf(read) >= 0) {
                $("input[name='skill']:eq(1)").prop("checked", "checked");
            };
            var fadai = '发呆';
            if (res.data.skill.indexOf(fadai) >= 0) {
                $("input[name='skill']:eq(2)").prop("checked", "checked");
            }
            $("#contractTerm").val(res.data.contractTerm);
            $("#contractDesc").val(res.data.contractDesc);
            form.render();
        });
    }
);

修改的提交：

form.on('submit(add)', function (data) {
    //获取复选框选中的值  用这个，网上总结的，用新增时候的方法会有问题！
    var skill = $("input[name='skill']");
    var skillArray = "";
    for (i = 0; i < skill.length; i++) {
        if (skill[i].checked) {
            var val = skill[i].value;
            if (skillArray.length > 0) {
                skillArray += "," + val;
            } else {
                skillArray += val;
            }
        }
    }
    data.field.skill = skillArray;

    // var skillArray = "";
    // $("input[name='skill']:checked").each(function () {
    //     // var id = $(this).attr("id");
    //     var value = $(this).val();
    //     skillArray = skillArray + value + ",";
    // })
    // // var id = $("#id").val();
    // var name = $("#name").val();
    // var gender = $("input[name='gender']").val();
    // var phone = $("#phone").val();

    // 提交表单
    _this.Commonmethod.ajax(
        Commonmethod().baseUrl().baseurl + '/api/oms/clerk/updateClerkInfo',
        // console.log(data.field),
        data.field,
        // {
        //     "name": name,
        //     // "id": id,
        //     "gender": gender,
        //     "phone": phone,
        //     "skill": skillArray,
        // },
        null,
        function (res) {
            var index = parent.layer.getFrameIndex(window.name);
            layer.msg("修改成功！");
            setTimeout(function () {
                layer.close(index);
                parent.location.reload();
            }, 500);
        }
    );
    return false;
});

后台：