如何序列化未选中的复选框的数组？

问题描述 投票：0回答：13

我如何修改此示例，以便它可以从未选中的复选框中获取值？

我希望所有复选框都有一个值，如果尚未选中，我想将其值设为

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]
javascript jquery forms
13个回答
19
投票

自己动手可能是最简单的：

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

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

17
投票

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

工作演示

    var serializedObj = {};
    $("form input:checkbox").each(function(){
        serializedObj[this.name] = this.checked;
    });
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;
};

代码示例

4
投票

另一个选择是只查看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();
};
3
投票

以下是我如何实现对 

$.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 发现的错误修复了代码。

3
投票

您可以将未选中的复选框数据附加到 

.serializeArray
结果：

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

这是我能想到的侵入性最小的解决方案。

2
投票

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

<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"}
1
投票

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

@SNag 的回答 工人几乎 99% 只需稍加修正即可。 更改以下行

来自：

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

至：

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

解释：因为这不起作用，因为 

this
返回了表单元素。因此，在表单上 
.each
不会为我们提供表单内的所有输入元素。所以我做了这个修正，效果非常好。

0
投票

另一个 SerializeArray()

这个实现再次基于 jQuery 的原始代码，但我需要它来实现一些具有两个不同值的 Bootstrap 的“开关”复选框。

$.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(); };
0
投票
var fields = $("form").serializeArray(); $('form input[type=checkbox]').map(function() { if( !this.checked ) { fields.push({ name: this.name, value: "off" }); } });
0
投票
<form id="form1"> <input type="text" id="Name" name="Name" placeholder="Your Name" /><br/> <input type="checkbox" id="Check1" name="Check1" /><label>Active</label><br /> <input type="submit" value="Save" /> </form> <script> $("#form1").on("submit", function (e) { e.preventDefault(); var formData = $("#form1").serializeArray(); var active = $("#Check1").prop("checked"); if (active == true) { formData.push({ name: 'Active', value: 'true' }); } else { formData.push({ name: 'Active', value: 'false' }); } }); </script>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.