Я использую 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" />
Как я могу получить "значения" флажков, которые не отмечены?
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>
Я видел, что это использовалось на некоторых сайтах в прошлом и всегда думало про себя: "Почему бы им просто не использовать флажок"?
Чтобы построить ответ гениального азатота, я немного расширил его для своего сценария:
/* 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()
);
У вас нет, поскольку serialize предназначен для использования в качестве строки запроса, и в этом контексте unchecked означает, что он не находится в querystring вообще.
Если вы действительно хотите получить значения отмеченных флажков, используйте: (untested off course)
var arr_unchecked_values = $('input[type=checkbox]:not(:checked)').map(function(){return this.value}).get();
если вы хотите добавить неизолированные флажки в строку запроса, добавьте следующее в функцию отправки jquery:
var moreinfo = '';
$('input[type=checkbox]').each(function() {
if (!this.checked) {
moreinfo += '&'+this.name+'=0';
}
});
Здесь другое решение, которое расширяет метод 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, поэтому вы получаете правильные результаты (хотя и в другом формате) с помощью любого метода, который вы вызываете.
Метод, который я использовал в своих системах, и который, я считаю, используется Struts, должен включать...
<input type="hidden" name="_fieldname" value="fieldvalue"/>
... непосредственно рядом с флажком как часть моей логики создания формы.
Это позволяет мне реконструировать, какие флажки были поданы в форме, но не выбраны, с небольшим количеством дополнительной логики, чтобы выполнить diff, что было подано и что было проверено, у вас есть те, которые были сняты. Представление также одинаков в содержании независимо от того, используете ли вы HTML или AJAX-стиль.
В зависимости от технологии, используемой на стороне сервера, вы можете использовать этот синтаксис...
<input type="hidden" name="_fieldname[]" value="fieldvalue"/>
..., чтобы упростить захват этих значений в виде списка.
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']; ?>" />
Одной из причин использования нестандартной сериализации 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
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();
Трюк состоит в том, чтобы перехватить сообщение формы и поменять флажки на скрытые поля ввода.
Пример: Обычный Отправить
$('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());
Это установит флажковые значения формы в booleans, используя их проверенное состояние.
var form = $('#myForm');
var data = form.serializeObject();
$('#myForm input[type=checkbox]').each(function() { data[this.name] = this.checked; });
Используемая среда создает два входа с тем же именем, что приводит к неожиданному поведению при сериализации формы. Я бы получил каждое значение checkbox, проанализированное как двухэлементный массив со строковыми значениями. В зависимости от того, как вы сопоставляете данные на стороне сервера, вы можете получить непредвиденные результаты.
Для 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) {
}
});
Вы можете вызвать handleInputs() добавить в функцию отправки до ajax
function handleInputs(){
$('input[type=checkbox]').each(function() {
if (!this.checked) {
$(this).attr("value","0");
}else{
$(this).attr("value","1");
}
});
}
Это отлично работает
Использование полей выбора, предложенных Энди, не обязательно является наилучшим вариантом для пользователя, поскольку для него требуется два щелчка мыши, а не один.
Кроме того, "Выбор" использует гораздо больше места в пользовательском интерфейсе, чем флажок.
Явный ответ - простое решение, но не работает в случае полей массива.
В моем контексте у меня есть форма переменной длины, которая содержит строки, отображающие сочетание текста и полей флажка:
<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);
У меня была аналогичная проблема, и следующее позволило мне собрать все входные значения формы и отмеченные/снятые флажки.
var serialized = this.$('#myform input').map(function() {
return { name: this.name, id: this.id, value: this.checked ? "checked" : "false" };
});
В этом примере предполагается, что вы хотите отправить форму обратно через 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);
иногда не проверяется, означает, что другие значения, например checked, могут означать, что yes unchecked no или 0,1 и т.д., это зависит от значения, которое вы хотите дать.. так что может быть другое состояние, кроме "непроверенных означает, что он не в querystring вообще",
"Было бы намного проще хранить информацию в БД, потому что тогда число полей из Сериализатора равнялось количеству полей в таблице. Теперь мне нужно пропустить, какие из них отсутствуют", вы правы, это мой проблема тоже... поэтому мне кажется, что я должен проверить это несуществующее значение....
но, возможно, это может быть решение? http://tdanemar.wordpress.com/2010/08/24/jquery-serialize-method-and-checkboxes/
просто добавьте скрытый ввод
<input type="hidden" name="your_specific_name">
не требуется значение, я тестировал это для меня.
Вы можете получить значения входов с сериализацией 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>Чтобы развернуть ответ (-ы) выше, в моем случае мне потребовалась отправка да/нет по одному идентификатору, сериализованному для моего бэкэнда.
Я установил элементы флажка, чтобы содержать идентификатор конкретного столбца базы данных, иначе (по умолчанию проверено):
(Ларавельский клинок)
<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 );
Для тех, кто использует функцию 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" или если отмечен "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';
});
Попробуйте следующее:
$(': input [type = "checkbox" ]: checked'). map (function() {return this.value}). get();
Я разместил решение, которое сработало для меня!
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"}]"