web-dev-qa-db-ja.com

jQuery serializeはチェックボックスを登録しません

フォーム内のすべてのデータフィールドを取得するためにjQuery.serializeを使用しています。

私の問題は、チェックされていないチェックボックスを取得しないことです。

これが含まれます：

<input type="checkbox" id="event_allDay" name="event_allDay" class="checkbox" checked="checked" />

しかし、これではありません

<input type="checkbox" id="event_allDay" name="event_allDay" class="checkbox" />

チェックされていないチェックボックスの「値」を取得するにはどうすればよいですか？

jqueryserialization
70
Steven

jQuery serializeは、要求のクエリ文字列またはPOST body。未チェックのチェックボックスは追加されない前に、ブラウザによって標準フォームがシリアル化される方法を厳密に模倣します。ブラウザは、ブール状態を持っているため、本当に理にかなっています。ユーザーによって選択される（含まれる）か、ユーザーによって選択されない（含まれない）かのいずれかです。

シリアル化する必要がある場合は、「なぜ？データ内の存在を単にチェックしないのはなぜですか？」と自問する必要があります。

JavaScriptがフォームデータをシリアル化する方法が、ブラウザーが行う方法と異なる動作をする場合、フォームの適切な劣化の可能性を排除していることに注意してください。それでもやる必要がある場合は、<select>オプションとしてYes/Noが付いたボックス。少なくともその場合、JSが無効になっているユーザーはサイトから疎外されず、HTML仕様で定義されている動作に反することはありません。

<select id="event_allDay" name="event_allDay">
   <option value="0" selected>No</option>
   <option value="1">Yes</option>
</select>

私はこれを過去にいくつかのサイトで採用し、常に自分自身に考えていたのを見てきました"なぜチェックボックスを使用しないのか"？

65
Andy E

アザトスの天才的な答えに基づいて、シナリオに合わせて少し拡張しました。

    /* Get input values from form */
    values = jQuery("#myform").serializeArray();

    /* Because serializeArray() ignores unset checkboxes and radio buttons: */
    values = values.concat(
            jQuery('#myform input[type=checkbox]:not(:checked)').map(
                    function() {
                        return {"name": this.name, "value": false}
                    }).get()
    );
74
mydoghasworms

シリアル化はクエリ文字列として使用されることを意図しているため、このコンテキストではチェックされていないということは、クエリ文字列にまったく含まれていないことを意味します。

チェックされていないチェックボックスの値を本当に取得したい場合は、次を使用します：（テストされていないオフコース）

var arr_unchecked_values = $('input[type=checkbox]:not(:checked)').map(function(){return this.value}).get();
26
azatoth

クエリ文字列にシリアル化されていないチェックボックスを追加する場合は、jqueryサブミット関数に次を追加します。

var moreinfo = '';

$('input[type=checkbox]').each(function() {     
    if (!this.checked) {
        moreinfo += '&'+this.name+'=0';
    }
});
17
Ash

「serializeArray」メソッドを拡張する別のソリューションを次に示します（元の動作を維持します）。

_//Store the reference to the original method:
_

var _serializeArray = $ ji.fn.serializeArray;

_//Now extend it with newer "unchecked checkbox" functionality:
$ji.fn.extend({
    serializeArray: function () {
        //Important: Get the results as you normally would...
        var results = _serializeArray.call(this);

        //Now, find all the checkboxes and append their "checked" state to the results.
        this.find('input[type=checkbox]').each(function (id, item) {
            var $item = $ji(item);
            var item_value = $item.is(":checked") ? 1 : 0;
            var item_name = $item.attr('name');
            var result_index = null;
            results.each(function (data, index) {
                if (data.name == item_name) {
                    result_index = index;
                }
            });

            if (result_index != null) {
                // FOUND replace previous value
                results[result_index].value = item_value;
            }
            else {
                // NO value has been found add new one
                results.Push({name: item_name, value: item_value});
            }
        });
        return results;
    }
});
_

これは実際には「true」または「false」のブール結果を追加しますが、必要に応じて、値をvalue: $item.is(":checked") ? 1 : 0に変更することにより、それぞれ「1」と「0」を使用できます。

使用法

通常どおり、フォームのメソッドを呼び出します：$form.serialize()または$form.serializeArray()。起こるのはserializeがserializeArrayを使用するため、どのメソッドを呼び出しても適切な結果（形式は異なります）が得られるということです。

4
bigp

私が自分のシステムで使用したテクニックは、Strutsで採用されていると信じていますが、含めることは...

<input type="hidden" name="_fieldname" value="fieldvalue"/>

...フォーム作成ロジックの一部としてチェックボックスのすぐ横にあります。

これにより、どのチェックボックスがフォームで提供されたが選択されなかったかを再構築できます。 HTMLを使用しているかAJAXスタイル送信を使用しているかに関係なく、送信もコンテンツで同じです。

サーバー側で使用しているテクノロジーによっては、この構文を使用することをお勧めします...

<input type="hidden" name="_fieldname[]" value="fieldvalue"/>

...これらの値をリストとして簡単に取得できるようにします。

3
Cefn Hoile

jQuery serializeは入力の値属性を取得します。

チェックボックスとラジオボタンを機能させる方法は？チェックボックスまたはラジオボタン0または1のクリックイベントを設定すると、変更を確認できます。

$( "#myform input[type='checkbox']" ).on( "click", function(){
     if ($(this).prop('checked')){
          $(this).attr('value', 1);
     } else {
          $(this).attr('value', 0);
     }
 }); 

 values = $("#myform").serializeArray();

また、チェックされたステータスのチェックボックスを設定したいときなど。 php

<input type='checkbox' value="<?php echo $product['check']; ?>" checked="<?php echo $product['check']; ?>" />
3
Fury

これは、チェックされた状態を使用して、フォームのチェックボックス値をブール値に設定します。

var form = $('#myForm');
var data = form.serializeObject();

$('#myForm input[type=checkbox]').each(function() { data[this.name] = this.checked; });

使用するフレームワークは同じ名前の2つの入力を作成するため、フォームをシリアル化するときに予期しない動作が発生します。各チェックボックスの値は、文字列値を持つ2要素配列として解析されます。サーバー側のデータのマッピング方法によっては、意図しない結果が生じる場合があります。

2
Jecoms

秘Theは、フォームポストをインターセプトし、チェックボックスを非表示の入力フィールドに変更することです。

例：プレーン送信

$('form').on("submit", function (e) {
    //find the checkboxes
    var $checkboxes = $(this).find('input[type=checkbox]');

    //loop through the checkboxes and change to hidden fields
    $checkboxes.each(function() {
        if ($(this)[0].checked) {
            $(this).attr('type', 'hidden');
            $(this).val(1);
        } else {
            $(this).attr('type', 'hidden');
            $(this).val(0);
        }
    });
});

例：AJAX

UIを更新しないようにajax経由でフォームを投稿する場合は、さらにいくつかのフープをジャンプする必要があります。

$('form').on("submit", function (e) {
    e.preventDefault();

    //clone the form, we don't want this to impact the ui
    var $form = $('form').clone();

    //find the checkboxes
    var $checkboxes = $form.find('input[type=checkbox]');

    //loop through the checkboxes and change to hidden fields
    $checkboxes.each(function() {
        if ($(this)[0].checked) {
            $(this).attr('type', 'hidden');
            $(this).val(1);
        } else {
            $(this).attr('type', 'hidden');
            $(this).val(0);
        }
    });

    $.post("/your/path", $form.serialize());
2
muglio

Ajaxの前にhandleInputs() addを呼び出すことができます。

function handleInputs(){
    $('input[type=checkbox]').each(function() {     
        if (!this.checked) {
            $(this).attr("value","0");
        }else{
            $(this).attr("value","1");
        }
    });
}

それは完全に機能しています

2
Ferhat KOÇER

質問または現在の回答で扱われていない非標準のチェックボックスのシリアル化を使用する理由の1つは、シリアル化されたデータで明示的に指定されたフィールドのみを非シリアル化（変更）することです-例優先順位を保存およびロードするためにcookieとの間でjqueryシリアライゼーションおよびデシリアライゼーションを使用している場合。

Thomas Danemarは、標準のserialize()メソッドに変更を加えて、オプションでcheckboxesAsBoolsオプションを取ります： http://tdanemar.wordpress.com/2010/08/24/jquery- serialize-method-and-checkboxes / -これは、上記の@mydoghaswormsによる実装に似ていますが、標準のシリアライズに統合されています。

誰かがいつでも改善する必要がある場合に備えて、Githubにコピーしました： https://Gist.github.com/1572512

さらに、「jquery.deserialize」プラグインはcheckboxesAsBoolsでシリアル化されたチェックボックス値を正しく逆シリアル化し、シリアル化されたデータに記載されていないチェックボックスを無視します。 https://github.com/itsadok/ jquery.deserialize

2
Tao
var checkboxes = $('#myform').find('input[type="checkbox"]');
$.each( checkboxes, function( key, value ) {
    if (value.checked === false) {
        value.value = 0;
    } else {
        value.value = 1;
    }
    $(value).attr('type', 'hidden');
});
$('#myform').serialize();
2
user

ASP.NET MVCの場合、checkboxesでフォームを正常に保存しますan[〜＃〜] ajax [〜＃〜]POST以下は、いくつかの組み合わせです @ Jecomsサジェスト を含むこの投稿で参照されているメソッド

var form = $('#myForm');
// Serialize the form into a JavaScript object using the jQuery.serializeObject plugin
// https://plugins.jquery.com/serializeObject/
var data = form.serializeObject();
// Change the submitted value of checkboxes to the value of the checked property
$('#myForm input[type=checkbox]').each( function () { data[this.name] = this.checked; } );
// For a MVC controller, convert the JS object back into a query string using jQuery.param function
data = $.param(data);
// Perform AJAX POST with the form data
$.ajax({
    async: true,
    url: 'mvcActionMethodURL',
    type: 'POST',
    data: data,
    success: function (data, textStatus, xhr) {

    },
    error: function (xhr, status, error) {

    }
});
2
iCode

Andyによって提案された選択フィールドを使用することは、1回ではなく2回のマウスクリックを必要とするため、ユーザーエクスペリエンスにとって必ずしも最適なオプションではありません。

さらに、「選択」は、チェックボックスよりもはるかに多くのスペースをUIで使用します。

Ashの答えは簡単な解決策ですが、array fieldsの場合は機能しません。

私のコンテキストでは、テキストとチェックボックスのフィールドが混在した行を保持する可変長フォームがあります：

<input type="checkbox" value="1" name="thisIsAChkArray[]"/> 
<input type="text" value="" name="thisIsATxtArray[]"/>

ポストされたデータをデコードするには、配列要素のorderが重要です。チェックされていない項目を通常のJqueryシリアライズに追加するだけでは、行要素の順序は保持されません。

これはAshの答えに基づいて提案されたソリューションです：

(function($) {
  $.fn.serializeWithChkBox = function() {
    // perform a serialize form the non-checkbox fields
    var values = $(this).find('select')
                        .add(  $(this).find('input[type!=checkbox]') )
                        .serialize();
    // add values for checked and unchecked checkboxes fields
    $(this).find('input[type=checkbox]').each(function() {
      var chkVal = $(this).is(':checked') ? $(this).val() : "0";
      values += "&" + $(this).attr('name') + "=" + chkVal;
    });
    return values;
  }
})(jQuery);
1
eosphere

私は同様の問題を抱えており、次のことにより、すべてのフォーム入力値とチェック済み/未チェックのチェックボックスを収集できました。

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

この例では、serializeではなくserializeArrayを介してフォームをポストバックし、チェックされていないチェックボックスはfalseを意味すると想定しています。

var form = $(formSelector);
var postData = form.serialize();

var checkBoxData = form.find('input[type=checkbox]:not(:checked)').map(function () {
    return encodeURIComponent(this.name) + '=' + false;
}).get().join('&');

if (checkBoxData) {
    postData += "&" + checkBoxData;
}

$.post(action, postData);
1
Dominik Holland

私はこの方法を使用し、値「0」または「1」にチェックされている場合に値を取得しました。これは、シリアル化されたform_dataにチェックボックス入力名が存在しない場合、チェックされないことを意味し、値をゼロ（form_data += '&' + name + '=0'）として追加しますが、チェックされる場合はserialize()関数が自動的に追加します。

   /*get all other form inputs*/ 
   var form_data = form.serialize();

    /*get checkboxes*/
    $.each($("#form_id input[type='checkbox']"), function(){
        var name = $(this).attr('name');
        if(form_data.indexOf(name)===-1)form_data += '&' + name + '=0';
    });
0
WebMan

Jquery serializeで入力値を取得できます

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="event_allDay" name="event_allDay" checked="checked" onchange="isChecked(this)" value="" />
<script>
    function isChecked(element) {
        $(element).val($(element).is(':checked').toString());
    }
    isChecked('#event_allDay');
</script>
0
Mustafa Cevat Boz

単に非表示の入力を追加するだけです

<input type="hidden" name="your_specific_name">

価値は必要ありません、私はこれが私のために働くことをテストしました

0
jk jk

時々uncheckedは他の値を意味します。例えば、checkedはyes unchecked noまたは0,1などを意味します。それは与えたい意味に依存します。したがって、「uncheckedはそれがクエリ文字列にないこと」

「DBに情報を保存するのがずっと簡単になります。Serializeのフィールドの数がテーブルのフィールドの数に等しくなるためです。今は不足しているフィールドを制御する必要があります」、これも私の問題です。 ..そのため、この存在しない値を確認する必要があります。..

しかし、これは解決策になる可能性がありますか？ http://tdanemar.wordpress.com/2010/08/24/jquery-serialize-method-and-checkboxes/

0
geomorillo

serialize()関数を使用する場合：

(function ($) {
    var serialize = $.fn.serialize;

    $.fn.serialize = function () {
        let values = serialize.call(this);
        let checkboxes = [];

        checkboxes = checkboxes.concat(
            $('input[type=checkbox]:not(:checked)', this).map(
            function () {
                return this.name + '=false';
            }).get()
        );

        if(checkboxes.length > 0)
            values = checkboxes.join('&') + '&' + values;

        return values;
    };
})(jQuery);
0
Isaac Adams

上記の回答を拡張するために、私の場合、バックエンドキャッチにシリアル化された単一のIDに対してyes/noを送信する必要がありました。

特定のデータベース列のIDを含むようにチェックボックス要素を設定します。別名（デフォルトのチェック）：

（Laravel Blade）

<div class="checkbox">
    <label>
        <input type="checkbox" value="{{ $heading->id }}" checked> {{ $heading->name }}
    </label>
</div>

私が提出したとき、私は次のものでデータを取得しました：

（jQuery）

let form = $('#formID input[type="checkbox"]').map(function() {
                return { id: this.value, value: this.checked ? 1 : 0 };
           }).get();

var data = JSON.stringify(form);
$.post( "/your/endpoint", data );
0
Grant