7

いくつかのチェックボックスを含む HTML フォームがあります。jQuery.serialize()関数を使用して、データベースに送信するクエリ文字列を作成します。私が抱えている問題は、チェックボックスがオフになっていると、.serialize()関数がそれをクエリ文字列に登録しないことです。

私の問題は、この jsfiddle: http://jsfiddle.net/cTKhH/に示されています。

チェックされていないチェックボックスの値をデータベースに保存する必要があるため、これは問題です。現在、情報はチェックボックスがチェックされている場合にのみ保存されます。チェックを外して情報を提出した.serialize()場合は、情報が提出されていないため変更されません。

.serialize()すべてのチェックボックスがチェックされていないときに、関数がチェックされていない値を返すようにする方法を知っている人はいますか?

ありがとう！！

** 編集 **

もう少し情報があります。チェックされていないチェック ボックスが送信されない理由がわかりました。これは、「成功した」フォーム コントロールではないためです。 html#successful-controls .

うまくいけば、まだ.serialize()チェックされていない値を送信するように関数を変更します。

4

6 に答える 6

4

これは簡単な例です。これを素敵なプラグインにラップできると確信しています。

html

<form id="doit" action="" method="post">    
    <input type="checkbox" name="test" data-checkedName="test" data-uncheckedid="yup" value="true" class="checkedValue" />
    <input type="hidden" name="test" id="yup" value="false" />
    <input type="submit" value="serialize" />
</form>

js

$(function () {

    $(".checkedValue").click(function () {

        var $cb = $(this),
            $associatedHiddenField = $("#" + $cb.attr("data-uncheckedid")),
            name = $cb.attr("data-checkedName");

        if (this.checked) {
            $cb.attr("name", name);
            $associatedHiddenField.removeAttr("name");

        } else {
            $cb.removeAttr("name");
            $associatedHiddenField.attr("name", name);
        }

    });

    $("#doit").submit(function (e) {
        e.preventDefault();
        console.log($(this).serialize());
    });
});
于 2012-04-26T20:11:23.430 に答える
2

おそらくserializeArray、jQueryの関数をカスタマイズして、設定されていない場合にチェックボックスを含めることができます。

デモ

注：以下は大まかなドラフトです。お気軽に最適化してください。

$.fn.serializeArray = function () {
    var rselectTextarea= /^(?:select|textarea)/i;
    var rinput = /^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i;
    var rCRLF = /\r?\n/g;

    return this.map(function () {
        return this.elements ? jQuery.makeArray(this.elements) : this;
    }).filter(function () {
        return this.name && !this.disabled && (this.checked || rselectTextarea.test(this.nodeName) || rinput.test(this.type) || this.type == "checkbox");
    }).map(function (i, elem) {
        var val = jQuery(this).val();
        if (this.type == 'checkbox' && this.checked === false) {
            val = 'off';
        }
        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();
}
于 2012-04-26T20:04:24.077 に答える
2

この問題の一般的な解決策は、チェックボックスと同じ名前の非表示フィールドと値「false」を含めることです。

このように、送信された値は、チェックボックスがチェックされていない場合は「false」、チェックされている場合は「true,false」（チェックボックスの値が「true」であると仮定）のいずれかになります。

サーバー側のコードによっては、「true、false」の値のペアが True として解析されるか、解析に何らかの助けが必要になる場合があります。一部の MVC フレームワークは、真と偽のペアに満足します。

于 2012-04-26T20:32:54.920 に答える
2

説明

jQuery.serialize()ブラウザとほぼ同じことをしてから、フォームを送信します。チェックされていないチェックボックスは、フォームの送信には含まれません。

select回避策は、要素を使用することです。

私のサンプルとこのjsFiddle デモンストレーションをチェックしてください

サンプル

<form>
<select id="event_allDay" name="a">
   <option value="0" selected>No</option>
   <option value="1">Yes</option>
</select>
</form>
<button id="b">submit</button>​


$('#b').click(function() {
    alert($('form').serialize());
});​

編集

あなたが使用しているサーバー技術が何であるかはわかりません。ただし、使用する場合は、デフォルト値を使用して修正することもできます。

于 2012-04-26T19:20:46.933 に答える
0

別の方法は、jQuery プラグインを使用することです。たとえば、serializeJSONには、チェックされていないチェックボックスの値を次のように設定するオプションがあります。

$('form').serializeJSON({checkboxUncheckedValue: "false"});

いずれにせよ、チェックされていない値には非表示の入力を使用するのが通常は最善です。

于 2014-09-17T22:41:55.850 に答える
-2 
<input type='hidden' name='check' value='false'/>
<input type='checkbox' name='check' value='true'/>

チェックボックスがチェックされていない場合、check = false を出力します。

于 2012-04-26T19:43:45.433 に答える