我有一个包含一组复选框的 HTML 表单:
<p><input type="checkbox" name="fruits" value="apple" /> Apple</p>
<p><input type="checkbox" name="fruits" value="banana" /> Banana</p>
<p><input type="checkbox" name="fruits" value="strawberry" /> Strawberry</p>
当我单击一个按钮时,我希望将所有选定的同名复选框放在一个数组中。
因此,如果用户选择 Apple 和 Banana,我预计会出现这样的情况:
{ 'fruits' : [ 'Apple', 'Banana' ] }
我尝试使用jQuery的serializeArray()方法,但结果并不像我预期的那样......
[ { name="fruits", value="apple"}, { name="fruits", value="banana"} ]
我创建了这个jsfiddle与我的示例代码。
我知道我可以迭代这个数组并创建我想要的对象。但我的问题是:
有没有一种干净简单的方法(使用jQuery或一些插件)来做到这一点?
*编辑:*我正在寻找解决此问题的某种通用解决方案。我想告诉一个方法表单元素并让该方法自动查找所有数据。就像 jQuery.serializeArray() 一样。
最佳答案
您可以使用map
方法。
$('#submitBtn').click(function() {
var obj = {};
obj.fruits = $('input[name=fruits]:checked').map(function(){
return this.value;
}).get();
console.log(obj);
});
您还可以使用 name
属性创建属性:
$('#submitBtn').click(function() {
var obj = {};
$('input[type=checkbox]:checked').each(function() {
if (!obj.hasOwnProperty(this.name))
obj[this.name] = [this.value];
else
obj[this.name].push(this.value);
});
// console.log(obj);
});
关于javascript - 获取复选框(同名)作为数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16187666/