Javascript 如何通过jQuery序列化多个复选框值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8295502/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to serialize multiple checkbox values by jQuery?
提问by Googlebot
I modified the simple example of jQuery.postas
我将jQuery.post的简单示例修改为
$("#searchForm").submit(function(event) {
event.preventDefault();
var $form = $( this ),
term = $( "input[name^=tick]:checked" ).serialize(),
url = $form.attr( 'action' );
$.post( url, { ticks: term, id: '55' },
function( data ) {
$( "#result" ).empty().append( data );
}
);
});
This works for single checkbox with val()but not for multiple checkboxes in
这适用于单个复选框，val()但不适用于多个复选框
<input type="checkbox" name="tick" value="'.$value.'" />
since serialize() should generateticks: termto be used astermin$.post`.
因为serialize() should generate滴答：term to be used asterm in$.post`。
How can I make the serialize()to generate appropriate data for $.post
我怎样才能serialize()生成适当的数据$.post
NOTE:I do not want to serialize the entire form but only checked values of checkbox INPUT.
注意：我不想序列化整个表单，而只想检查复选框 INPUT 的值。
回答by Sudhir Bastakoti
You could use .serializeArray() Ref: http://api.jquery.com/serializeArray/
您可以使用 .serializeArray() 参考：http://api.jquery.com/serializeArray/
回答by Ajsti.pl - Maciej Szewczyk
Simple value collector :) HTML
简单的值收集器 :) HTML
<input type="checkbox" class="selector" value="{value}"/>
JS
JS
var checked='';
$('.selector:checked').each(function(){
checked=checked+','+$(this).val();
});
PHP
PHP
$ids=explode(',',substr($_GET['param_with_checked_values'],1));
回答by Beppe
In html code change name="tick"in name="tick[]"and you can use simply $(this).serialize();to post all checked values.
在 html 代码更改name="tick"中name="tick[]"，您可以简单$(this).serialize();地使用发布所有选中的值。
回答by Stanimir Stoyanov
You can still use .serializeArrayand use it in .post()like this:
您仍然可以像这样使用.serializeArray和使用它.post()：
var postData = {};
var form = $('#formId').serializeArray();
for (var i = 0; i < form.length; i++) {
if (form[i]['name'].endsWith('[]')) {
var name = form[i]['name'];
name = name.substring(0, name.length - 2);
if (!(name in postData)) {
postData[name] = [];
}
postData[name].push(form[i]['value']);
} else {
postData[form[i]['name']] = form[i]['value'];
}
}
$.post('/endpoint', postData, function(response) {
}, 'json');
postDatawill contain all form elements except the disabled ones. All checkbox values will be passed as an array just like when doing a normal form submission.
postData将包含除禁用元素之外的所有表单元素。所有复选框值都将作为数组传递，就像在进行普通表单提交时一样。
回答by mu4ddi3
let $form = $(".js-my-form");
let $disabled = $form.find(':input:disabled').removeAttr('disabled');
let formData = {};
$.each($form.serializeArray(), function (index, fieldData) {
if (fieldData.name.endsWith('[]')) {
let name = fieldData.name.substring(0, fieldData.name.length - 2);
if (!(name in formData)) {
formData[name] = [];
}
formData[name].push(fieldData.value);
} else {
formData[fieldData.name] = fieldData.value;
}
});
$disabled.attr('disabled', 'disabled');
console.log(formData);
Its a variation of Stanimir Stoyanov answer with possibility to serialize disabled fields.
它是 Stanimir Stoyanov 答案的变体，可以序列化禁用字段。
回答by mozgras
term = $("#input[name^=tick]:checked").map(function () {
return this.value;
}).get();
term.join();
