关于jQuery中serializeJsonObject()不能获取到所有选中的checkbox值问题探讨

1.背景

（写在前面的话：如果哪位大佬觉得不对或者有需要改进的地方，请不吝指教，本人QQ:245195671。如果这个世界不好，那么就从我们自身去改变，哪怕只是把我们自己做好！）

  刚入职一个公司，接到一个功能：页面有多个复选框，根据复选框中选中的值作为不同的查询条件来筛选数据。

公司使用的是前后端分离，前端使用的bootstrap+Jquery+Thymeleaf 。对于页面表单中数据，系统使用了jQuery的serializeJsonObject()来组装请求数据。

 

我在接到这个任务时，起初觉得很简单，但事实上就在serializeJsonObject()这个地方卡住了。通过一系列

经过验证得出：

  当选中多个复选框时，通过serializeJsonObject()无法获取所有选中的checkbox的值。

 

那么怎么解决这个问题呢？

2.问题解决及思考

2.1 情景再现：功能截图

如图所示，功能大体如下：

2.2  问题的产生

比如我选中上图中认证类型的*实名认证和企业认证，然后通过serializeJsonObject()获取选中的值，代码如下：

var queryParams = function(params) {
    var param = $("#searchSignAuthOnOffInit").serializeJsonObject();
    param["pageIndex"] = Math.ceil(params.offset / params.limit) + 1;
    param["pageSize"] = params.limit;
    param["order"] = params.order;
    return param;
}

操作截图：

在浏览器打开调试工具，触发调用这个的方法，可以看到结果如下：

通过调试工具，不难发现，我选中的是两个checkbox，但事实上只能获取到一个checbox的值，于是我们得出问题：

通过serializeJsonObject()不能获取多个被选中的复选框（checkbox）的值。

那么怎么解决这个问题呢？

2.3 问题的解决

问题的解决思路就是：通过serializeJsonObject()获取表单一般元素后，使用jQuery获取被选中的复选框的值，如下：

var queryParams = function(params) {
    var param = $("#searchSignAuthOnOffInit").serializeJsonObject();
    param["pageIndex"] = Math.ceil(params.offset / params.limit) + 1;
    param["pageSize"] = params.limit;
    param["order"] = params.order;
    var authType = $("input[name='authType']:checked").val();
    var busiType = $("input[name='busiType']:checked").val();
    var authTypes ="";
    var busiTypes ="";
    $('input[name="authType"]:checked').each(function (index, item) {
          authTypes+=$(this).val()+",";
     });
    $("input[name='busiType']:checked").each(function (index, item) {
    	busiTypes+=$(this).val()+",";
      });
    param["authType"]=authTypes;
    param["busiType"]=busiTypes;
    return param;
}

2.4 重置功能：将所有选中的checkbox选中状态，改为false,代码如下：

3. 思考

  checkbox虽然是比较简单的功能，但是这次在$("#xx").serializeJsonObject();遇到问题，正好理解清楚这些。

 当然这个功能也涉及到了mybaitis中in（xxx,xxx）的使用！

 

最后，希望有异议的同学相互一起交流！加油！