如何对未选中的复选框进行serializeArray?

时间:2011-09-07 14:09:09

标签: javascript jquery forms

我如何modify this example这样才能从未选中的复选框中获取值?

我希望所有复选框都有一个值,如果尚未选中,我希望将其值设为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]

12 个答案:

答案 0 :(得分:13)

自己做这件事可能最简单:

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

如果还有其他输入,那么您可以序列化表单,然后找到与上面类似的未选中复选框,并将结果附加到第一个数组。

答案 1 :(得分:12)

serializeArray会忽略未选中的复选框。您可以尝试这样的操作。

正在使用 demo

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

答案 2 :(得分:4)

您可以使用此取消选中的值

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

code samples

答案 3 :(得分:1)

您可以为每个复选框添加隐藏的错误值:

<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" />

对于未选中的复选框,您只会获得“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"}

答案 4 :(得分:1)

另一种选择是查看serializeArray的源代码并删除(或修改)对filter的调用。我刚刚接受了这个功能并创建了一个名为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();

};

答案 5 :(得分:1)

使用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 }

答案 6 :(得分:1)

以下是我如何实现$.serializeArray的简单覆盖,修复了复选框的默认序列化行为,并为所有其他类型保留了默认行为。

在下面的代码中,错过的复选框被注入原始序列化数组。复选框状态将返回"true"(而不是"on")或"false",具体取决于它是否为checked

(function ($) {
    var _base_serializeArray = $.fn.serializeArray;
    $.fn.serializeArray = function () {
        var a = _base_serializeArray.apply(this);
        $.each(this.find("input"), 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

更新:修复了基于@ shyammakwana.me发现的错误的代码。

答案 7 :(得分:1)

@SNag's answer工人几乎99%只是稍微纠正一下。 更改以下行

来自:

$.each(this, function (i, e) {

$.each(this.find('input'), function (i, e) {

说明:由于this返回了表单元素,因此无效。所以在表单.each上不会给我们表单中的所有输入元素。所以我做了这个修正,它就像魅力一样。

答案 8 :(得分:0)

我根据@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();
};

答案 9 :(得分:0)

又是另一个SerializeArray()

此实现再次基于jQuery的原始代码,但我需要一些具有两个不同值的Bootstrap's "switch" checkboxes

$.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();
};

答案 10 :(得分:0)

您可以将未选中的复选框数据附加到.serializeArray结果中:

var formData = $("#mybaseelement").serializeArray();
$('#mybaseelement input[type="checkbox"]:not(:checked)').each(function(i, e) {
    formData.push({name: e.getAttribute("name"), value: false});
});

这是我可以提出的侵入性最小的解决方案。

答案 11 :(得分:0)

var fields = $("form").serializeArray();
$('form input[type=checkbox]').map(function() {
   if( !this.checked )
        {
                fields.push({ name: this.name, value: "off" });
        }
   });