7

我有一个带有一些复选框的 HTML 表单。我使用 jQuery.serialize()函数制作查询字符串以提交到数据库。我遇到的问题是，当未选中复选框时，该.serialize()函数不会在查询字符串中注册它。

这个 jsfiddle 说明了我的问题：http: //jsfiddle.net/cTKhH/。

这是一个问题，因为我仍然需要将未选中复选框的值保存到数据库中。现在，仅在选中复选框时才保存信息。如果取消选中，并且.serialize()提交了来自的信息，则不会进行任何更改，因为没有提交信息。

有谁知道如何让我的.serialize()函数在未选中时返回所有复选框的未选中值？

谢谢！！

** 编辑 **

再多一点信息，我现在知道为什么未提交未选中的复选框，因为它不是“成功”的表单控件，请参见此处：http://www.w3.org/TR/html401/interact/forms。 html#successful-controls。

希望我仍然修改.serialize()函数以提交未经检查的值。

4

6 回答 6

4

这是一个简单的例子——我相信你可以把它包装成一个不错的插件。

html

<form id="doit" action="" method="post">    
    <input type="checkbox" name="test" data-checkedName="test" data-uncheckedid="yup" value="true" class="checkedValue" />
    <input type="hidden" name="test" id="yup" value="false" />
    <input type="submit" value="serialize" />
</form>

js

$(function () {

    $(".checkedValue").click(function () {

        var $cb = $(this),
            $associatedHiddenField = $("#" + $cb.attr("data-uncheckedid")),
            name = $cb.attr("data-checkedName");

        if (this.checked) {
            $cb.attr("name", name);
            $associatedHiddenField.removeAttr("name");

        } else {
            $cb.removeAttr("name");
            $associatedHiddenField.attr("name", name);
        }

    });

    $("#doit").submit(function (e) {
        e.preventDefault();
        console.log($(this).serialize());
    });
});
于 2012-04-26T20:11:23.430 回答
2

这个问题的一个常见解决方案是简单地包含一个与复选框同名的隐藏字段，并且值“false”

这样，如果未选中复选框，则提交的值将是“false”，如果选中，则提交值将是“true,false”（假设您的复选框的值为“true”）。

根据您的服务器端代码，“真，假”值对可能会被解析为 True，或者在解析它时可能需要一些帮助。一些 MVC 框架会对真假对感到满意。

于 2012-04-26T20:32:54.920 回答
2

如果未设置，您可能可以serializeArray在 jQuery 中自定义允许包含复选框的功能。

演示

注意：以下只是一个粗略的草稿，请随时优化。

$.fn.serializeArray = function () {
    var rselectTextarea= /^(?:select|textarea)/i;
    var rinput = /^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i;
    var rCRLF = /\r?\n/g;

    return this.map(function () {
        return this.elements ? jQuery.makeArray(this.elements) : this;
    }).filter(function () {
        return this.name && !this.disabled && (this.checked || rselectTextarea.test(this.nodeName) || rinput.test(this.type) || this.type == "checkbox");
    }).map(function (i, elem) {
        var val = jQuery(this).val();
        if (this.type == 'checkbox' && this.checked === false) {
            val = 'off';
        }
        return val == null ? null : jQuery.isArray(val) ? jQuery.map(val, function (val, i) {
            return {
                name: elem.name,
                value: val.replace(rCRLF, "\r\n")
            };
        }) : {
            name: elem.name,
            value: val.replace(rCRLF, "\r\n")
        };
    }).get();
}
于 2012-04-26T20:04:24.077 回答
2

描述

jQuery.serialize()几乎和浏览器一样，然后你提交一个表单。未选中的复选框不包含在表单提交中。

解决方法是使用select元素。

查看我的示例和这个jsFiddle 演示

样本

<form>
<select id="event_allDay" name="a">
   <option value="0" selected>No</option>
   <option value="1">Yes</option>
</select>
</form>
<button id="b">submit</button>​


$('#b').click(function() {
    alert($('form').serialize());
});​

编辑

我不知道您是否使用以及使用什么服务器技术。但是如果你使用一个，你也可以使用默认值来修复它。

于 2012-04-26T19:20:46.933 回答
0

另一种方法是使用 jQuery 插件。例如，serializeJSON可以选择为未选中的复选框设置值，如下所示：

$('form').serializeJSON({checkboxUncheckedValue: "false"});

在任何情况下，通常最好对未检查的值使用隐藏输入。

于 2014-09-17T22:41:55.850 回答
-2 
<input type='hidden' name='check' value='false'/>
<input type='checkbox' name='check' value='true'/>

如果未选中复选框，将输出 check = false。

于 2012-04-26T19:43:45.433 回答