问题:复选框在选中后新增和根据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; });
后台: