Подтвердить что ты не робот

Как я могу сериализоватьArray для снятых флажков?

Как я могу изменить этот пример, чтобы он мог получать значения из флажков, которые не отмечены?

Я хочу, чтобы все флажки имели значение, если оно не было проверено, я хочу получить его значение как false.

<input type="checkbox" name="Check01" value="true" />
<input type="checkbox" name="Check02" value="true" checked="checked" />

Поведение по умолчанию

$("form").serializeArray();
// [Check02 = true]

Ожидаемое поведение

$("form").serializeArray();
// [Check01 = false, Check02 = true]
4b9b3361

Ответ 1

Возможно, проще всего сделать это самостоятельно:

 var serialized = $('input:checkbox').map(function() {
   return { name: this.name, value: this.checked ? this.value : "false" };
 });

Если есть другие входы, вы можете сериализовать эту форму, а затем установите флажки без отметки с чем-то вроде выше и добавьте этот результат в первый массив.

Ответ 2

serializeArray игнорирует флажки, которые не отмечены. Вы можете попробовать что-то вроде этого.

Работа демонстрация

    var serializedObj = {};
    $("form input:checkbox").each(function(){
        serializedObj[this.name] = this.checked;
    });

Ответ 3

вы можете использовать это, чтобы получить непроверенные значения

$.fn.serializeObject = function () {
var o = {};
var a = this.serializeArray();
$.each(a, function () {
    if (o[this.name] !== undefined) {
        if (!o[this.name].push) {
            o[this.name] = [o[this.name]];
        }
        o[this.name].push(this.value || '');
    } else {
        o[this.name] = this.value || '';
    }
});
var $radio = $('input[type=radio],input[type=checkbox]',this);
$.each($radio,function(){
    if(!o.hasOwnProperty(this.name)){
        o[this.name] = '';
    }
});
return o;
};

примеры кода

Ответ 4

вы можете добавить скрытое ложное значение для каждого флажка:

<input type="checkbox" name="Check01" value="true" /><input name="Check01" type="hidden" value="false" />
<input type="checkbox" name="Check02" value="true" checked="checked" /><input name="Check02" type="hidden" value="false" />

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

var params = {};
$.each($('form').serializeArray(), function (index, value) {
    params[value.name] = params[value.name] ? params[value.name] || value.value : value.value;
});
console.log(params); // outputs: {"Check01":"false","Check02":"true"}

Ответ 5

другой вариант - просто посмотреть исходный код для serializeArray и удалить (или изменить) вызов для фильтрации. Я только что взял эту функцию и создал новую, называемую serializeArrayAll, как это:

$.fn.serializeArrayAll = function() {
var rCRLF = /\r?\n/g;
return this.map(function(){
    return this.elements ? jQuery.makeArray( this.elements ) : this;
})
/* this is what is excluding the unchecked checkboxes (and also other disabled options) 
    .filter(function(){
        return this.name && !this.disabled &&
            ( 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( rCRLF, "\r\n" ) };
                }) :
            { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
    }).get();

};

Ответ 6

Используя плагин jQuery serializeJSON, вы можете использовать атрибут data-unchecked-value, чтобы указать значение при снятии флажка:

<input type="checkbox" name="Check01" value="true" data-unchecked-value="false" />
<input type="checkbox" name="Check02" value="true" data-unchecked-value="false" checked="checked" />

JavaScript:

$('input').serializeJSON({ parseBooleans: true });
// returns => { 'Check01' : false, 'Check02' : true }

Ответ 7

Я сделал свое собственное новое решение на основе ответов @Pointy, @Ben и исходного кода jQuery. Ответ от @Pointy имел странное поведение, которое возвращало контексты для флажков, это устраняет эту проблему. Ответ от @Ben также не срабатывал должным образом, потому что он всегда возвращал checkbox = on, даже если он не был отмечен.

$.fn.serializeArrayWithCheckboxes = function() {
var rCRLF = /\r?\n/g;
return this.map(function(){
    return this.elements ? jQuery.makeArray( this.elements ) : this;
})

    .map(function( i, elem ){
        var val = jQuery( this ).val();


        if (val == null) {
          return val == null
        //next 2 lines of code look if it is a checkbox and set the value to blank 
        //if it is unchecked
        } else if (this.type == "checkbox" && this.checked == false) {
          return { name: this.name, value: this.checked ? this.value : ""}
        //next lines are kept from default jQuery implementation and 
        //default to all checkboxes = on
        } else {
          return 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();
};

Ответ 8

Еще один SerializeArray()

Эта реализация снова основана на исходном коде jQuery, но мне она нужна для некоторых флажков Bootstrap "switch" с двумя разными значениями.

$.fn.serializeArrayWC = function() {
    var rCRLF = /\r?\n/g;
    return this.map(function(){
        return this.elements ? jQuery.makeArray( this.elements ) : this;
    })
    .map(function(i, elem){
        if (this.type == "checkbox") {
            // Bootstrap checkboxes with two different values.
            if (jQuery(this).hasClass("switched")) {
                // Always return value (either on-value or off-value).
                return { name: this.name, value: this.value };
            }
            // Normal checkboxes. Unchecked checkboxed are not returned.
            if (!this.checked) {
                // This will be removed by the !!f filter, below.
                return false;
            }
            // Return the value, or "on".
            return { name: this.name, value: this.value||"on" };
        }
        var val = jQuery(this).val();
        if (val == null) {
            return { name: elem.name, value: null };
        } else {
            return 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" ) };
        }
    })
    .filter(function(i, f){ return !!f; })
    .get();
};