layui form表单复选框优化

发表于 分类于 ， 阅读次数： 本文字数： 363 阅读时长 ≈ 1 分钟

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

通过官方的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