jqueryの.serializeをオーバーライドしてチェックされていないチェックボックスを含めるにはどうすればいいですか

Question

htmlチェックボックスをサーバーに投稿させる方法はかなり異なりますが、$ .serializeを除いては何も変更せずに行います。私は理想的には、チェックボックスをオンとして投稿し、チェックを外して0、空、またはヌルとして投稿することをお勧めします。

私はjqueryの内部動作について少し混乱していますが、これまでのところこれがありますが、未チェックのチェックボックスをオンにしています...誰でもこの修正を次のように続ける方法を教えてください。

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

Answer 1

それはマイナーチェンジだ：私がテストしていないが、それは最も論理的なアプローチを思わ

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

。幸運

Answer 2

あなたがserialize()を呼び出す前に、チェックボックスが、私はhereそれをテストしている

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

オフになっている場合は、明示的に falseに値を設定する必要があります。

Answer 3

私は@Robin Mabenのアプローチ（ネイティブ.serialize（）を呼び出す前にチェックボックスを前処理していますが）を大幅に変更することなく動作させることはできません。

私は "mySerialize"（おそらくより良い名前を必要とします）と呼ばれているこのプラグイン、思い付いた：オペラ11.62とIE9でテスト

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

。

このように、mySerialize()にパラメータとして渡されるオプションオブジェクトとして、チェックボックスのオンとオフの状態がシリアル化される方法を指定できます。デフォルトでは、ON状態は 'name = on'、OFFは 'name = off'としてシリアル化されます。他のすべてのフォーム要素は、ネイティブjQuery serialize()に従ってシリアル化されます。

Answer 4

これは、jquery.serialize（）メソッドをオーバーライドして、チェックされた値だけではなく、チェックされた値またはチェックされていない値の両方を送信します。 true/falseを使用しますが、 "this.checked"を "：0"の "this.checked？"に変更することもできます。

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); 
    } 
}); 

Answer 5

Robin Mabenのソリューションには、ボックスに「チェック済み」のプロパティを設定する1ステップがないと思います。唯一のチェックボックスがシリアル化されているので、我々は少しを追加する必要がチェックjQueryのuser guide notes on serialise()状態：このメソッドへ

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

ザ・唯一のダウンサイドがチェックすべてのボックスを示すフォームの簡単なフラッシュですが - 少し奇妙に見えます。

Answer 6

ただデータを添付してください。

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; 
    } 
); 

Answer 7

私はフォームがだろうように、それらをオフに、その後、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)}); 

Answer 8

ビートルート、ビートルートの答えは、jQueryの1.9以降で私のために動作しませんでした。 .val()と.prop()を使用し、セレクタの1つのフォームにシリアライズを制限するコンテナで.eq(0)の要件を取り除いた。私は、同時に複数のフォームをシリアル化しなければならないまれなケースがあったので、その要件を削除すると解決しました。あなたが対応するfiddle here見ることができます

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

：ここに私の修正ソリューションです。