我使用jQuery.serialize來檢索窗體中的所有數據字段。jQuery序列化不註冊複選框
我的問題是，它不檢索未選中的複選框。
它包括這樣的：
<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>框作爲選項。至少這樣，禁用JS的用戶不會與您的網站疏遠，也不會違背HTML規範中定義的行爲。
<select id="event_allDay" name="event_allDay">
<option value="0" selected>No</option>
<option value="1">Yes</option>
</select>
我已經看到了這個採用在過去的一些網站，總是對自己說，「他們爲什麼不只是使用一個複選框」？
如果你想序列化的複選框添加到您的查詢字符串這會使信息更容易存儲在數據庫中。因爲那麼來自Serialize的字段數將等於表中的字段數。現在我必須控制哪些失蹤。 – Steven 2010-06-13 10:59:10
想要取消選中複選框和取消設置單選按鈕是非常好的情況。這些字段的值可能已經存在於服務器上，而您只是想更新。通過在提交字符串中不包含這些值，它假定您每次都在對記錄進行完整覆蓋。 – mydoghasworms 2011-08-18 10:37:09
@mydog：爲什麼會這樣？如果你問我，這似乎是一個糟糕的設計選擇。如果瀏覽器提交表單數據，這些字段將永遠不會出現在查詢字符串中，那麼爲什麼您將其設計爲與JavaScript不同呢？一開始你就完全消除了任何優雅退化的機會。 – 2011-08-18 13:35:23
你不這樣做，因爲serialize是用來作爲查詢字符串的，在這種情況下，unchecked意味着它根本不在查詢字符串中。
如果你真的想選中的複選框的值，使用：（未經測試偏離航向）
var arr_unchecked_values = $('input[type=checkbox]:not(:checked)').map(function(){return this.value}).get();
純粹的天才！謝謝！ – mydoghasworms 2011-08-18 14:04:23
[下面的答案]（http://stackoverflow.com/a/7108685/404699）很好地擴展了這一點。 – steampowered 2012-01-05 00:01:11
，以下內容添加到您的jQuery提交功能：
var moreinfo = '';
$('input[type=checkbox]').each(function() {
if (!this.checked) {
moreinfo += '&'+this.name+'=0';
}
});
有時未檢查手段的其他值，例如檢查可能意味着是沒有選中或0,1等等它取決於你想給的意思..所以可能是另一種狀態，除了「未經檢查意味着它根本不在查詢字符串中」
「這會使信息更容易存儲在數據庫中。 Serialize中的字段數量等於表中的字段數量，現在我必須控制哪些字段丟失「，youre對這也是我的問題...所以看來我必須檢查這個不存在的值....
但也許這可能是一個解決方案？ http://tdanemar.wordpress.com/2010/08/24/jquery-serialize-method-and-checkboxes/
如果不存在導致的問題，您應該使用帶有yes/no選項的'
要建立在azatoth的天才的回答，我稍微延長它爲我的情景：
/* 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": this.value}
}).get()
);
我在我自己的系統中使用的技術，我相信這是Struts所採用，是包括...
<input type="hidden" name="_fieldname" value="fieldvalue"/>
...緊鄰的複選框作爲我的表單創建邏輯的一部分。
這使我可以重新構建哪些複選框在表單中被選中，但沒有被選中，只需要一小塊額外的邏輯來執行差異服務和檢查內容，您就可以選擇未選中的選項。無論您使用HTML還是AJAX樣式提交，提交內容也是一樣的。
根據您正在使用的服務器端，那麼你不妨使用此語法的技術...
<input type="hidden" name="_fieldname[]" value="fieldvalue"/>
...可以很容易抓住這些值的列表。
使用非標準複選框序列化的一個原因是，在問題或當前答案中沒有解決的是只反序列化（更改）在序列化數據中明確指定的字段 - 例如，當你使用jQuery序列化和反序列化到/從一個cookie保存和加載prefererences。
托馬斯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
嘗試這種情況：
$（ '：輸入[類型= 「複選框」]：檢查'）。圖（功能（）{返回THIS.VALUE}）。得到（）;
只是簡單地添加一個隱藏的輸入
<input type="hidden" name="your_specific_name">
不需要值，我測試了這個工作對我來說
請精心準備。嘗試添加代碼示例並鏈接到文檔。 – 2013-07-06 10:49:55
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();
jQuery的序列化獲得的輸入值屬性。
現在如何獲得複選框和單選按鈕的工作？如果您設置複選框的單擊事件或單選按鈕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']; ?>" />
使用Andy所建議的選擇字段不一定是用戶體驗的最佳選項，因爲它需要兩次鼠標點擊而不是一次。
此外，「選擇」在UI中使用的空間比複選框多得多。
Ash的答案是一個簡單的解決方案，但不適用於陣列字段的情況。
以我方面，我具有可變長度形式中，保持行顯示文本和複選框字段的混合：
<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);
關鍵是要攔截的形式後，改變相應的複選框，隱藏輸入字段。
例如：普通提交
$('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發佈形式不更新UI。
$('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());
這是擴展「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，所以你可以用你調用的任何方法得到正確的結果（儘管格式不同）。
錯誤：我的錯誤，當複選框爲「true」時，它仍然會附加一個param與通常的「on」值。要更正這個... – bigp 2015-12-02 19:54:08
如果複選框被選中，您將得到2個結果中具有相同名稱的值...其中一個'on'，另一個以'1'結尾...... – WonderLand 2017-10-26 09:15:40
我已經修復問題:) – WonderLand 2017-10-26 09:27:20
我有一個類似的問題，以下允許我收集所有表單輸入值和選中/未選中複選框。
var serialized = this.$('#myform input').map(function() {
return { name: this.name, id: this.id, value: this.checked ? "checked" : "false" };
});
「this。$」特定於我正在使用該解決方案的Zendesk應用程序框架。 – wooz16 2016-03-28 16:11:16
我發佈了適用於我的解決方案！
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"}]"
你能獲得的輸入值與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>這個例子假設你要發佈的形式通過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);
我喜歡'not（：checked）'選擇器 – 2017-12-11 15:37:15
這會將您的表單複選框值設置爲使用其選中狀態的布爾值。
var form = $('#myForm');
var data = form.serializeObject();
$('#myForm input[type=checkbox]').each(function() { data[this.name] = this.checked; });
我們使用的框架創建兩個具有相同名稱的輸入，當序列化表單時會導致意外的行爲。我會得到每個複選框值分析爲一個雙元素數組與字符串值。根據您在服務器端映射數據的方式，您可能會收到意想不到的結果。
serializeObject（）看起來是一個jQuery插件：https：//plugins.jquery.com/serializeObject/ – iCode 2017-12-05 18:55:22
有一個非常小的'serializeObject（）'：http：// benalman.com/projects/jquery-misc-plugins/#serializeobject – 2017-12-11 15:24:33
只是爲了擴大上面的答案，在我的情況下，我需要發送一個是/否針對序列化到我的後端catch的單個ID。
我設置複選框元素包含特定數據庫列的ID，又名（默認選中）：
（Laravel刀片）
<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);
對於ASP.NET MVC，我們成功地保存複選框形式通過AJAX POST與以下，這是在這篇文章中引用的多種方式的組合，包括@Jecoms suggestion：
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) {
}
});
我們在ASP網上做的是有一個隱藏的輸入： '' '' 這種方式如果沒有勾選，它會取值爲隱藏的 – 2014-02-11 11:25:22