Fork me on GitHub

layui form表单复选框优化

需求:某一个字段复选框操作,数据保存到某个字段中。

通过官方的demo获取提交的数据效果

//假如选中了两个选项,获取的数据是两个字段,很明显不符合需求
{“like[write]”:”write”,“like[read]”:”read”}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="layui-form-item">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like[write]" title="写作" value = "write">
<input type="checkbox" name="like[read]" title="阅读" value = "read">
<input type="checkbox" name="like[dai]" title="发呆" value = "dai">
</div>
</div>
<script>
//Demo
layui.use('form', function(){
var form = layui.form;
//监听提交
form.on('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
});
</script>

然后又把复选框name改成同一个,只能获取到最后一个数据了。
//假如选中了两个选项,只能获取到最后一个数据了,很明显不符合需求
{“like”:”read”}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="layui-form-item">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like" title="写作" value = "write">
<input type="checkbox" name="like" title="阅读" value = "read">
<input type="checkbox" name="like" title="发呆" value = "dai">
</div>
</div>
<script>
//Demo
layui.use('form', function(){
var form = layui.form;
//监听提交
form.on('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
});
</script>

解决方案

最终查看form.js源码,好像不支持,最终解决方案如下:
打开layui form.js源码,搜索 checkbox|radio

1
2
3
4
5
6
7
8
//把原有的代码 field[item.name] = item.value; 改为
var value = item.value;
if(item.type == "checkbox"){//如果多选
if(field[item.name]){
value = field[item.name] + "," + value;
}
}
field[item.name] = value;

form.js源码下载:(https://github.com/fallsea/fsLayuiPlugin/blob/master/fsLayuiPlugin/plugins/layui/lay/modules/form.js

坚持原创技术分享,您的支持将鼓励我继续创作!