Ответ 1

jQuery serialize близко имитирует, как стандартная форма будет сериализована браузером, прежде чем присоединяться к строке запроса или телу POST в запросе. Непроверенные флажки не включены браузером, что имеет смысл на самом деле, потому что они имеют логическое состояние - они либо выбраны пользователем (включены), либо не выбраны пользователем (не включены).

Если вам нужно, чтобы он был в сериализованном виде, вы должны спросить себя: "почему? почему бы просто не проверить его существование в данных?".

Имейте в виду, что если способ преобразования данных в формате JavaScript ведет себя по-разному, как это делает браузер, то вы устраняете любую вероятность изящного деградации для вашей формы. Если вам все еще нужно это сделать, просто используйте поле <select> с параметрами Yes/No as. По крайней мере, пользователи с отключенным JS не отчуждаются от вашего сайта, и вы не собираетесь противоречить определенному поведению в спецификации HTML.

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

Я видел, что это использовалось на некоторых сайтах в прошлом и всегда думало про себя: "Почему бы им просто не использовать флажок"?

Ответ 2

Чтобы построить ответ гениального азатота, я немного расширил его для своего сценария:

    /* 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()
    );

Ответ 3

У вас нет, поскольку serialize предназначен для использования в качестве строки запроса, и в этом контексте unchecked означает, что он не находится в querystring вообще.

Если вы действительно хотите получить значения отмеченных флажков, используйте: (untested off course)

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

Ответ 4

если вы хотите добавить неизолированные флажки в строку запроса, добавьте следующее в функцию отправки jquery:

var moreinfo = '';

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

Ответ 5

Здесь другое решение, которое расширяет метод 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;
    }
});

Это фактически добавит "истинные" или "ложные" логические результаты, но если вы предпочитаете, вы можете использовать "1" и "0" соответственно, изменив значение на value: $item.is(":checked") ? 1 : 0.

Использование

Как обычно, вызовите метод в вашей форме: $form.serialize() или $form.serializeArray(). Случается, что serialize в любом случае использует serializeArray, поэтому вы получаете правильные результаты (хотя и в другом формате) с помощью любого метода, который вы вызываете.

Ответ 6

Метод, который я использовал в своих системах, и который, я считаю, используется Struts, должен включать...

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

... непосредственно рядом с флажком как часть моей логики создания формы.

Это позволяет мне реконструировать, какие флажки были поданы в форме, но не выбраны, с небольшим количеством дополнительной логики, чтобы выполнить diff, что было подано и что было проверено, у вас есть те, которые были сняты. Представление также одинаков в содержании независимо от того, используете ли вы HTML или AJAX-стиль.

В зависимости от технологии, используемой на стороне сервера, вы можете использовать этот синтаксис...

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

..., чтобы упростить захват этих значений в виде списка.

Ответ 7

jQuery serialize получает атрибут value входов.

Теперь, как установить флажок и переключатель на работу? Если вы установите событие щелчка на флажке или радиокнопке 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']; ?>" />

Ответ 8

Одной из причин использования нестандартной сериализации checkbox, которая не рассматривается в вопросе или в текущих ответах, является только десериализация (изменение) полей, которые явно указаны в сериализованных данных - например когда вы используете сериализацию jquery и десериализацию в/из cookie для сохранения и загрузки предпочтений.

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

Ответ 9

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

Ответ 10

Трюк состоит в том, чтобы перехватить сообщение формы и поменять флажки на скрытые поля ввода.

Пример: Обычный Отправить

$('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

Вам нужно пройти еще несколько обручей, если вы отправляете форму через 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());

Ответ 11

Это установит флажковые значения формы в booleans, используя их проверенное состояние.

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

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

Используемая среда создает два входа с тем же именем, что приводит к неожиданному поведению при сериализации формы. Я бы получил каждое значение checkbox, проанализированное как двухэлементный массив со строковыми значениями. В зависимости от того, как вы сопоставляете данные на стороне сервера, вы можете получить непредвиденные результаты.

Ответ 12

Для ASP.NET MVC мы успешно сохраняем форму с флажками с помощью 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) {

    }
});

Ответ 13

Вы можете вызвать handleInputs() добавить в функцию отправки до ajax

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

Это отлично работает

Ответ 14

Использование полей выбора, предложенных Энди, не обязательно является наилучшим вариантом для пользователя, поскольку для него требуется два щелчка мыши, а не один.

Кроме того, "Выбор" использует гораздо больше места в пользовательском интерфейсе, чем флажок.

Явный ответ - простое решение, но не работает в случае полей массива.

В моем контексте у меня есть форма переменной длины, которая содержит строки, отображающие сочетание текста и полей флажка:

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

Для декодирования опубликованных данных важно порядок элементов массива. Просто добавление не проверенных элементов в обычный сериализатор Jquery не поддерживает порядок элементов строки.

Вот предлагаемое решение, основанное на ответе Эша:

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

Ответ 15

У меня была аналогичная проблема, и следующее позволило мне собрать все входные значения формы и отмеченные/снятые флажки.

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

Ответ 16

В этом примере предполагается, что вы хотите отправить форму обратно через 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);

Ответ 17

иногда не проверяется, означает, что другие значения, например checked, могут означать, что yes unchecked no или 0,1 и т.д., это зависит от значения, которое вы хотите дать.. так что может быть другое состояние, кроме "непроверенных означает, что он не в querystring вообще",

"Было бы намного проще хранить информацию в БД, потому что тогда число полей из Сериализатора равнялось количеству полей в таблице. Теперь мне нужно пропустить, какие из них отсутствуют", вы правы, это мой проблема тоже... поэтому мне кажется, что я должен проверить это несуществующее значение....

но, возможно, это может быть решение? http://tdanemar.wordpress.com/2010/08/24/jquery-serialize-method-and-checkboxes/

Ответ 18

просто добавьте скрытый ввод

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

не требуется значение, я тестировал это для меня.

Ответ 19

Вы можете получить значения входов с сериализацией jquery

<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>

Ответ 20

Чтобы развернуть ответ (-ы) выше, в моем случае мне потребовалась отправка да/нет по одному идентификатору, сериализованному для моего бэкэнда.

Я установил элементы флажка, чтобы содержать идентификатор конкретного столбца базы данных, иначе (по умолчанию проверено):

(Ларавельский клинок)

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

Ответ 21

Для тех, кто использует функцию 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);

Ответ 22

Я использовал этот способ и получаю значения "0" или если отмечен "1". Это говорит о том, что если флажок не установлен, то добавьте значение как ноль (form_data += '&' + name + '=0'), но если установлен флажок, функция serialize() автоматически добавит его. form_data - это данные, которые уже получают функцией serialize(). Но флажки значения добавляются позже. Это не лучшее решение, но решило мою проблему с флажками.

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

Ответ 23

Попробуйте следующее:

$(': input [type = "checkbox" ]: checked'). map (function() {return this.value}). get();

Ответ 24

Я разместил решение, которое сработало для меня!

var form = $('#checkboxList input[type="checkbox"]').map(function() {
               return { name: this.name, value: this.checked ? this.value : "false" };
            }).get();

var data = JSON.stringify(form);

data value is : "[{"name":"cb1","value":"false"},{"name":"cb2","value":"true"},{"name":"cb3","value":"false"},{"name":"cb4","value":"true"}]"