20

HTMLチェックボックスをサーバーに投稿するためのさまざまな方法をかなり読んだことがありますが、$.serialize以外は何も変更せずにそれを実行したいと考えています。理想的には、チェックされたボックスはオンとして投稿され、チェックされていないものは 0、空、または null として投稿されます。

私は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();
    }
});
4

11 に答える 11

13

これにより、jquery.serialize() メソッドがオーバーライドされ、チェックされた値だけでなく、チェックされた値とチェックされていない値の両方が送信されます。true/false を使用しますが、必要に応じて「this.checked」を「this.checked ? 'on' : 0」に変更できます。

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);
    }
});
于 2012-05-18T21:39:39.500 に答える
3

@Robin Maben のアプローチ (ネイティブの .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;
};

Opera 11.62 および IE9 でテスト済み。

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

于 2012-04-14T01:00:06.983 に答える
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)});
于 2015-08-24T18:20:50.363 に答える
-1

を呼び出す前に、チェックボックスがオフの場合serialize()に値を明示的に設定する必要がありますfalse

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

ここでテストしました。

于 2012-04-13T20:03:49.233 に答える
-1

これはマイナーな変更です:

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

私はテストしていませんが、最も論理的なアプローチのようです。幸運を

于 2012-04-13T19:37:03.833 に答える