欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-31 13:40:25
...

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

1.背景

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

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

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

 

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

经过验证得出:

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

 

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

2.问题解决及思考

2.1 情景再现:功能截图

如图所示,功能大体如下:

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

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;
}

操作截图:

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

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

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

通过调试工具,不难发现,我选中的是两个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,代码如下:

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

3. 思考

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

 当然这个功能也涉及到了mybaitis中in(xxx,xxx)的使用!

 

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

相关标签: jquery 工作发现