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

12

Я прочитал довольно много разных способов размещения 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();
    }
});

Ваш Ответ

9   ответов
-1

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

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

Это сработало почти идеально. Я только что поменял jQuery (this) .checked на jQuery (this) .prop ('check & apos;), и он отлично работал. Спасибо! Jonathon
по какой-то причине это не сработало, но в конце концов это сработало: jQuery (this) .prop ("type") == "checkbox" Jonathon
@ user975571 или просто использоватьthis.checked вместоjQuery(this).prop('checked')
0

$.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.

3

ред вызовом нативного .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;
};

Tested in Opera 11.62 and IE9.

Как вы можете видеть в этомDEMO, вы можете указать, как флажки & apos; Состояния ON и OFF сериализуются как объект параметров, передаваемый в качестве параметраmySerialize(), По умолчанию состояние ON сериализуется как «имя = вкл»; и OFF как «имя = выкл». Все остальные элементы формы сериализуются согласно нативному jQuery.serialize().

этот не будет работать тогда, во второй раз, я не уверен, где он идет не так, но как только вы вызываете mySerialize () в форме, а затем снова вызываете mySerialize (), он не работает, он работает только в первый раз.
Мне пришлось немного изменить свой ответ для jQuery 1.9 и позже. Смотрите мой ответ для обновлений.
Спасибо за этот пост :)
0

обнаружив непроверенные флажки, проверив их перед вызовом 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)});
0

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

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

Я проверил этоВот.

Это, похоже, не работает для меня: атрибут установлен правильно, но сериализация по-прежнему не показывает его. На вашей тестовой странице есть несколько флажков, но нет способа (который я вижу) проверить функцию сериализации, чтобы увидеть, работает ли она на самом деле.
снятые флажки не отправляются на сервер, независимо от значения (отсюда и этот вопрос). все флажки имеют значение, поскольку по умолчанию они имеют значение & quot; true & quot; Независимо от того, вы установили или нет.stackoverflow.com/questions/11424037/…
@ibrewster: Вы можете обернуть их в форму и отправить (или $ .post), а также проверить сетевые инструменты, чтобы увидеть, что сериализуется.
11

что в решении Робина Мабена не хватает одного шага, который состоит в том, чтобы установить флажки, чтобы иметь свойство «флажок». JQuery & APOS; sруководство пользователя по serialise () утверждают, что только отмеченные флажки сериализуются, поэтому нам нужно добавить немного:

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

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

Спасибо за включение & quot; единственной обратной стороны & quot; в ответ :)
Спас день! Новичкам в Jquery, используйте этот код ДО сериализации.
8

ных / непроверенных значений, а не только проверенных значений. Он использует true / false, но вы можете изменить & quot; this.checked & quot; & quot; this.checked? & APOS; на & APOS; : 0 & quot; Если вы предпочитаете.

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);
    }
});
Это решение избавило меня от необходимости вызывать ajax-вызовы при каждом нажатии ... ты мой герой. :лук:
Удивительное решение, это должно быть выбрано в качестве принятого ответа
11

В моей процедуре сохранения достаточно отправить непроверенную как пустую строку и отметить как "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 значения для одного и того же флажка, один отмечен, а последний не проверен.
0

их версиях. я использовал.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;
};

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

Похожие вопросы