jQuery serialize не регистрирует флажки

Question

Я использую 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" />

Как я могу получить "значения" флажков, которые не отмечены?

Answer 1

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

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

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

Answer 2

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

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

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

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

Answer 3

Для 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) {

    }
});

Answer 4

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

Answer 5

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

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

Answer 6

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

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

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

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

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

Answer 7

Я использовал этот способ и получаю значения «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';
    });

Answer 8

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

Answer 9

Просто чтобы расширить ответ (ы) выше, в моем случае мне потребовалось отправить да / нет против одного идентификатора, сериализованного в мой backend catch.

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

(Клинок Ларавела)

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

Answer 10

Вы можете получить входные значения с помощью 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>