获取与数组相同的复选框(具有相同名称)

时间:2013-04-24 08:56:49

标签: javascript jquery

我有一个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

我知道我可以迭代这个数组并创建我想要的对象。但我的问题是:
是否有清洁&amp;简单的方式(使用jQuery或一些插件)来做到这一点?

* 编辑:* 我正在寻找这种问题的某种通用解决方案。我想告诉一个方法form元素,并让该方法自动查找所有数据。就像jQuery.serializeArray()那样。

2 个答案:

答案 0 :(得分:2)

可能有更好的方法来实现这一目标,但你可以这样做:

var fruits = [];

$('#selectAll').click(function() {
   $('input:checkbox').prop('checked', true);
});

$('#submitBtn').click(function() {
   $("input[name=fruits]:checked").each(function() {
     var fruit = $(this).val();
     fruits.push(fruit);
  });

  console.log(fruits);
});

http://jsfiddle.net/NzeVU/3/

答案 1 :(得分:1)

您可以使用map方法。

$('#submitBtn').click(function() {
    var obj = {};
    obj.fruits = $('input[name=fruits]:checked').map(function(){
        return this.value;
    }).get();
    console.log(obj);
});

http://jsfiddle.net/62f3X/1/

您还可以使用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);
});

http://jsfiddle.net/62f3X/2/