如何覆盖jquery的.serialize以包含未选中的复选框

Question

我已经阅读了很多不同的方法让html复选框被发布到服务器,但我真的希望这样做而不需要修改任何东西,除了$ .serialize.理想情况下,我希望选中要发布的复选框,并取消选中将其发布为0,空或null.

我对jquery的内部工作感到有些困惑,但到目前为止我已经得到了这个,但它将未经检查的复选框设置为'on'...有谁能告诉我如何在下面继续这个修改？

$.fn.extend({
    serializeArray: function() {
        return this.map(function(){
            return this.elements ? jQuery.makeArray( this.elements ) : this;
        })
        .filter(function(){
            return this.name && !this.disabled &&
                ( this.checked || !this.checked || rselectTextarea.test( this.nodeName ) || rinput.test( this.type ) );
        })
        .map(function( i, elem ){
            var val = jQuery( this ).val();

            return val == null ?
                null :
                jQuery.isArray( val ) ?
                    jQuery.map( val, function( val, i ){
                        return { name: elem.name, value: val.replace( /\r?\n/g, "\r\n" ) };
                    }) :
                    { name: elem.name, value: val.replace( /\r?\n/g, "\r\n" ) };
        }).get();
    }
});

Answer 1

只需附加数据.在我的保存例程中,提交未选中的空字符串并检查为"on"就足够了:

var formData = $('form').serialize();

// include unchecked checkboxes. use filter to only include unchecked boxes.
$.each($('form input[type=checkbox]')
    .filter(function(idx){
        return $(this).prop('checked') === false
    }),
    function(idx, el){
        // attach matched element names to the formData with a chosen value.
        var emptyVal = "";
        formData += '&' + $(el).attr('name') + '=' + emptyVal;
    }
);

Answer 2

这将覆盖jquery.serialize()方法以发送已检查/未检查的值,而不是仅检查已检查的值.它使用true/false,但如果您愿意,可以将"this.checked"更改为"this.checked？"on::0".

var originalSerializeArray = $.fn.serializeArray;
$.fn.extend({
    serializeArray: function () {
        var brokenSerialization = originalSerializeArray.apply(this);
        var checkboxValues = $(this).find('input[type=checkbox]').map(function () {
            return { 'name': this.name, 'value': this.checked };
        }).get();
        var checkboxKeys = $.map(checkboxValues, function (element) { return element.name; });
        var withoutCheckboxes = $.grep(brokenSerialization, function (element) {
            return $.inArray(element.name, checkboxKeys) == -1;
        });

        return $.merge(withoutCheckboxes, checkboxValues);
    }
});

Answer 3

我认为Robin Maben的解决方案缺少一个步骤,即将框设置为具有"已检查"属性.关于serialise()状态的jQuery 用户指南说明只检查了复选框的序列化,所以我们需要添加一点:

$('form').find(':checkbox:not(:checked)').attr('value', '0').prop('checked', true);

这种方法的唯一缺点是表单的简短闪烁显示所有选中的框 - 看起来有点奇怪.

Answer 4

这是一个微小的变化：

    .map(function( i, elem ){
        var val = jQuery( this ).val();
        if ((jQuery(this).checked != undefined) && (!jQuery(this).checked)) {
            val = "false";
        }

我还没有测试过，但这似乎是最合乎逻辑的方法。祝你好运