Как я могу переопределить jquery.serialize, чтобы включить отмеченные флажки

Я прочитал несколько разных способов, когда html-флажки размещаются на сервере, но я действительно стараюсь сделать это, не изменяя ничего, кроме $.serialize. В идеале я бы хотел, чтобы флажки были размещены так же, как и на них, и не отмечены, чтобы их выставляли как 0, пустые или нулевые.

Меня немного смущает внутренняя работа 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();
    }
});

ОТВЕТЫ

Ответ 1

просто присоедините данные. В моей рутинной рутине это достаточно, чтобы отправить unchecked как пустую строку и проверить как "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;
    }
);

Ответ 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);
    }
});

Ответ 3

Я думаю, что решение Robin Maben отсутствует на одном шаге, чтобы установить для полей свойство "checked". jQuery руководство пользователя по serialize() утверждает, что только отмеченные флажки сериализованы, поэтому нам нужно добавить бит:

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

Единственным недостатком этого метода является кратковременная вспышка вашей формы, показывающая все отмеченные флажки - выглядит немного странно.

Ответ 4

Мне нравится подход @Robin Maben (предварительная обработка флажков перед вызовом native.serialize()), но не может заставить его работать без существенных изменений.

Я придумал этот плагин, который я назвал "mySerialize" (возможно, нуждается в более лучшем имени):

$.fn.mySerialize = function(options) {
    var settings = {
        on: 'on',
        off: 'off'
    };
    if (options) {
        settings = $.extend(settings, options);
    }
    var $container = $(this).eq(0),
        $checkboxes = $container.find("input[type='checkbox']").each(function() {
            $(this).attr('value', this.checked ? settings.on : settings.off).attr('checked', true);
        });
    var s = ($container.serialize());
    $checkboxes.each(function() {
        var $this = $(this);
        $this.attr('checked', $this.val() == settings.on ? true : false);
    });
    return s;
};

Протестировано в Opera 11.62 и IE9.

Как вы можете видеть в этом DEMO, вы можете указать способ, в котором состояния ON и OFF флажков сериализованы как объект опций, переданный как параметр mySerialize(). По умолчанию состояние ON сериализуется как "name = on" и OFF как "name = off". Все остальные элементы формы сериализуются в соответствии с встроенным jQuery serialize().

Ответ 5

Прежде чем вы вызовете serialize(), вам нужно явно установить значение false, если флажок снят флажок

$(form).find(':checkbox:not(:checked)').attr('value', false);

Я протестировал его здесь.

Ответ 6

Я сделал следующее, установив флажки без флажков, проверив их перед вызовом serializeArray, а затем сними их, чтобы форма была в том же состоянии, что и пользователь, оставив ее:

var unchecked = chartCfgForm.find(':checkbox:not(:checked)');
unchecked.each(function() {$(this).prop('checked', true)});
var formValues = chartCfgForm.serializeArray();
unchecked.each(function() {$(this).prop('checked', false)});

Ответ 7

Ответ Beetroot-Beetroot не работал у меня в jQuery 1.9 и более поздних версиях. Я использовал .val() и .prop() и избавился от требования .eq(0) к контейнеру, который ограничивал сериализацию в одной форме в селекторе. У меня был редкий случай, когда мне пришлось сериализовать несколько форм одновременно, поэтому устранение этого требования решило это. Здесь мое модифицированное решение:

$.fn.mySerialize = function(options) {
    // default values to send when checkbox is on or off
    var settings = {
        on: 'on',
        off: 'off'
    };

    // override settings if given
    if (options) {
        settings = $.extend(settings, options);
    }

    // set all checkboxes to checked with the on/off setting value
    // so they get picked up by serialize()
    var $container = $(this),
        $checkboxes = $container.find("input[type='checkbox']").each(function() {
            $(this).val(this.checked ? settings.on : settings.off).prop('checked', true);
        });

    var serialized = ($container.serialize());

    $checkboxes.each(function() {
        var $this = $(this);
        $this.prop('checked', $this.val() == settings.on);
    });

    return serialized;
};

Вы можете увидеть здесь .

Ответ 8

Вот как я реализовал простое переопределение $.serializeArray, которое исправляет поведение сериализации по умолчанию для флажков, а поведение по умолчанию сохраняется для всех других типов.

В приведенном ниже коде пропущенные флажки вставляются в исходный сериализованный массив. Состояние флажка возвращается как "true" (вместо "on") или "false" в зависимости от того, является ли оно checked или нет.

(function ($) {
    var _base_serializeArray = $.fn.serializeArray;
    $.fn.serializeArray = function () {
        var a = _base_serializeArray.apply(this);
        $.each(this, function (i, e) {
            if (e.type == "checkbox") {
                e.checked 
                ? a[i].value = "true" 
                : a.splice(i, 0, { name: e.name, value: "false" })
            }
        });
        return a;
    };
})(jQuery);

Вы можете настроить его так, чтобы он возвращал "on"/"off" или true/false.

Ответ 9

 var x = $('#formname').serializeArray();
 var serialized = $('#formname').find(':checkbox:not(:checked)').map(function () { 
   x.push({ name: this.name, value: this.checked ? this.value : "false" }); 
 });

попробуй это

Ответ 10

Это незначительное изменение:

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

Я не тестировал, но это самый логичный подход. Удачи.