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

心已赠人 2023-07-01 06:23 59阅读 0赞

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

## 1.背景 ##

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

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

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

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

**经过验证得出：**

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

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

## 2.问题解决及思考 ##

### **2.1 情景再现：功能截图** ###

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3ODYwODM_size_16_color_FFFFFF_t_70][]

### 2.2  问题的产生 ###

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

操作截图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3ODYwODM_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3ODYwODM_size_16_color_FFFFFF_t_70 2][]

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

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

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

### 2.3 问题的解决 ###

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

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

![20200119155154831.png][]

## 3. 思考 ##

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

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3ODYwODM_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200119152738114.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3ODYwODM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3ODYwODM_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200119153747725.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3ODYwODM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3ODYwODM_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200119154101509.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3ODYwODM=,size_16,color_FFFFFF,t_70
[20200119155154831.png]: https://img-blog.csdnimg.cn/20200119155154831.png