serializeJSON 将没有选中的 checkbox 也序列化进去
时间: 2023-10-03 15:08:11 浏览: 54
如果要使用 jQuery 的 serializeJSON 方法将表单中的 checkbox 值序列化为 JSON 字符串,包括没有被选中的 checkbox,可以在表单提交前,通过 jQuery 遍历表单中的 checkbox,将未选中的 checkbox 的 value 设置为 false。
以下是一个示例 HTML 表单:
```html
<form id="my-form">
<input type="text" name="name" value="John" />
<input type="checkbox" name="isMarried" value="true" checked="checked" />
<input type="checkbox" name="hasChildren" value="true" />
<button type="submit">Submit</button>
</form>
```
以下是通过 jQuery 遍历 checkbox 并修改未选中的 checkbox 的 value 的示例代码:
```javascript
$('#my-form').submit(function(event) {
event.preventDefault();
$('input[type=checkbox]').each(function() {
if (!$(this).is(':checked')) {
$(this).val('false');
}
});
var formData = $(this).serializeJSON();
console.log(formData);
});
```
输出结果:
```json
{
"name": "John",
"isMarried": true,
"hasChildren": false
}
```
在上述示例中,通过 `$('input[type=checkbox]').each()` 遍历所有的 checkbox,并使用 `$(this).is(':checked')` 判断 checkbox 是否被选中。如果未被选中,则使用 `$(this).val('false')` 将 checkbox 的值设置为 false。注意,在修改 checkbox 的值后,再使用 `$(this).serializeJSON()` 将表单序列化为 JSON 字符串。