Layui多选只有最后一个值的处理

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

最近公司使用layui来开发网页界面，在使用layui的时候，发现了一个问题：就是layui中的checkBox在多选的情况下然后使用ajax异步提交会出现只是提交最后一个checkBox的值的情况。我在网上也搜索了一些解决方案，大多都是在提交前重新设置datafield来提交。如果不想这样子做的话，我这里想到了另外一种方法，写在这里和大家交流。

---

一、主要思想

通过增加一个隐藏的输入来对于选中的值来进行整合和传递。例如下面的代码所示，一开始需要的参数名称是taskQuery.taskStatus，但是因为layui只是传递了最后的一个选中的值。所以干脆新增加一个隐藏的input来传递taskQuery.taskStatus，其他的input当做搜集信息使用。

二、使用步骤

1.原来的代码

代码如下（示例）：

 状态：<br>
 <input type="checkbox" name="taskQuery.taskStatus" value="1" title="新建" lay-skin="primary">
 <input type="checkbox" name="taskQuery.taskStatus" value="2" title="启动" lay-skin="primary" checked>
 <input type="checkbox" name="taskQuery.taskStatus" value="3" title="接受" lay-skin="primary" checked>
 <input type="checkbox" name="taskQuery.taskStatus" value="4" title="拒绝" lay-skin="primary">
 <input type="checkbox" name="taskQuery.taskStatus" value="5" title="暂停" lay-skin="primary">
 <input type="checkbox" name="taskQuery.taskStatus" value="6" title="终止" lay-skin="primary">
 <input type="checkbox" name="taskQuery.taskStatus" value="7" title="完成" lay-skin="primary">
 <input type="checkbox" name="taskQuery.taskStatus" value="8" title="关闭" lay-skin="primary">
 <input type="checkbox" name="taskQuery.taskStatus" value="10" title="审核中" lay-skin="primary">
 <br>

2.修改以后

代码如下（示例）：

<div class="checkBox-dealwithClass">
 状态：<br>
 <input type="checkbox" name="taskStatus" value="1" title="新建" lay-skin="primary">
 <input type="checkbox" name="taskStatus" value="2" title="启动" lay-skin="primary" checked>
 <input type="checkbox" name="taskStatus" value="3" title="接受" lay-skin="primary" checked>
 <input type="checkbox" name="taskStatus" value="4" title="拒绝" lay-skin="primary">
 <input type="checkbox" name="taskStatus" value="5" title="暂停" lay-skin="primary">
 <input type="checkbox" name="taskStatus" value="6" title="终止" lay-skin="primary">
 <input type="checkbox" name="taskStatus" value="7" title="完成" lay-skin="primary">
 <input type="checkbox" name="taskStatus" value="8" title="关闭" lay-skin="primary">
 <input type="checkbox" name="taskStatus" value="10" title="审核中" lay-skin="primary">
 <br>
 <input type="text" class="layui-hide" name="taskQuery.taskStatus" value="2,3">
 </div>

使用的监听的js：

    layui.form.on('checkbox()', function(data){
        var arr=[];
        $(this).closest(".checkBox-dealwithClass").children("input:checkbox").each(function(){
            if ($(this).is(':checked')) { //判断选中
                arr.push($(this).val())
            }
        });
        $(this).closest(".checkBox-dealwithClass").children("input:text").attr("value",arr);
    });

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了layui的checkbox的一种解决方法。如果有问题可以提出来，谢谢。