jQuery将选中的复选框值存入数组

Question

我正在尝试获取所有当前被选中的复选框的值，并将它们存储到一个数组中。 这是我目前的代码：

 $("#merge_button").click(function(event){
    event.preventDefault();
    var searchIDs = $("#find-table input:checkbox:checked").map(function(){
      return $(this).val();
    });
    console.log(searchIDs);
  });

然而，这将输出比我需要的更多的内容。我不仅得到了数值，还有一些其他我不想要的东西。

["51729b62c9f2673e4c000004", "517299e7c9f26782a7000003", "51729975c9f267f3b5000002", prevObject: jQuery.fn.jQuery.init[3], context: document, jquery: "1.9.1", constructor: function, init: function…]

我只想要ID（在本例中为前3个项目）。

通过使用 $.each 并将值推送到数组中，我可以获得所需的输出：

$("#find-table input:checkbox:checked").each(function(){ myArray.push($(this).val()); })

["51729b62c9f2673e4c000004", "517299e7c9f26782a7000003", "51729975c9f267f3b5000002"]

但我想使用$.map，因为它可以节省一行代码并且更漂亮。

谢谢

- if __name__ is None

Answer 1

在最后调用.get()方法将结果为jQuery对象的数组转换为真正的数组。

$("#merge_button").click(function(event){
    event.preventDefault();
    var searchIDs = $("#find-table input:checkbox:checked").map(function(){
      return $(this).val();
    }).get(); // <----
    console.log(searchIDs);
});

根据文档:

由于返回值是一个包含数组的jQuery对象，通常需要在结果上调用.get()方法以使用基本数组。

- Andrew Whitaker

---

我原本期望从$.map得到一个真正的数组。感谢您提供的解决方案，它有效了。 - if __name__ is None

非常感谢，我需要这个用于我的票务中心。 - Steven

我不理解的是为什么需要 .get()，当函数从 jQuery 集合中返回 .val() 的时候。这是因为 map 在将其传递给 searchIDs 之前将其转换回 jQuery 对象吗？ - iconoclast

我们可以将值作为数组类型获取吗？ - krutssss

Answer 2

演示：http://jsfiddle.net/PBhHK/

$(document).ready(function(){

    var searchIDs = $('input:checked').map(function(){

      return $(this).val();

    });
    console.log(searchIDs.get());

});

只需调用 get()，您就可以获得符合规范的数组，其如文档所述：http://api.jquery.com/map/

$(':checkbox').map(function() {
      return this.id;
    }).get().join();

- Cristi Pufu

Answer 3

你需要在你的 .map() 函数末尾添加 .toArray()。

$("#merge_button").click(function(event){
    event.preventDefault();
    var searchIDs = $("#find-table input:checkbox:checked").map(function(){
        return $(this).val();
    }).toArray();
    console.log(searchIDs);
});

演示: http://jsfiddle.net/sZQtL/

- tymeJV

Answer 4

我对你的代码进行了一些重构，并且相信我找到了你正在寻找的解决方案。基本上，我没有将searchIDs设置为.map()的结果，而是将值推入了一个数组中。

$("#merge_button").click(function(event){
  event.preventDefault();

  var searchIDs = [];

  $("#find-table input:checkbox:checked").map(function(){
    searchIDs.push($(this).val());
  });

  console.log(searchIDs);
});

我创建了一个带有运行代码的fiddle。

- Mark Meyer

Answer 5

     var ids = [];

$('input[id="find-table"]:checked').each(function() {
   ids.push(this.value); 
});

这对我很有帮助！

- Thalinda Bandara

Answer 6

var idsArr = [];

$('#tableID').find('input[type=checkbox]:checked').each(function() {
    idsArr .push(this.value);
});

console.log(idsArr);

- Qammar Feroz

Answer 7

需要将HTML中命名为数组的表单元素在JavaScript对象中作为数组，就像实际提交表单一样。

如果有一个包含多个复选框的表单，例如：

<input name='breath[0]' type='checkbox' value='presence0'/>
<input name='breath[1]' type='checkbox' value='presence1'/>
<input name='breath[2]' type='checkbox' value='presence2'/>
<input name='serenity'  type='text' value='Is within the breath.'/>
...

结果是一个带有以下内容的对象：

data = {
   'breath':['presence0','presence1','presence2'],
   'serenity':'Is within the breath.'
}


var $form = $(this),
    data  = {};

$form.find("input").map(function()
{
    var $el  = $(this),
        name = $el.attr("name");

    if (/radio|checkbox/i.test($el.attr('type')) && !$el.prop('checked'))return;

    if(name.indexOf('[') > -1)
    {
        var name_ar = name.split(']').join('').split('['),
            name    = name_ar[0],
            index   = name_ar[1];

        data[name]  = data[name] || [];
        data[name][index] = $el.val();
    }
    else data[name] = $el.val();
});

这里有很多答案可以帮助改进我的代码，但它们要么太复杂，要么不能完全满足我的需求：使用jQuery将表单数据转换为JavaScript对象

它能够工作，但还有改进的空间：仅适用于一维数组，并且结果索引可能不是连续的。数组的长度属性返回下一个索引号作为数组的长度，而不是实际长度。

希望这有所帮助。Namaste！

- i_a

Answer 8

这里允许在页面上使用复选框类，并且var允许将它们收集到一个数组中，然后您可以在for循环中检查是否选中为true，然后逐个执行所需的操作。在这里，我设置了自定义有效性。我认为这将解决您的问题。

  $(".allows").click(function(){
   var allows = document.getElementsByClassName('allows');
   var chkd   = 0;  
   for(var i=0;i<allows.length;i++)
   {
       if(allows[i].checked===true)
       {
           chkd = 1;
       }else
       {

       }
   }

   if(chkd===0)
   {
       $(".allows").prop("required",true);
       for(var i=0;i<allows.length;i++)
        {
        allows[i].setCustomValidity("Please select atleast one option");
        }

   }else
   {
       $(".allows").prop("required",false);
       for(var i=0;i<allows.length;i++)
        {
        allows[i].setCustomValidity("");
        }
   }

}); 

- Manish

Answer 9

不要使用"each"。它用于在同一元素中进行操作和更改。使用"map"从元素主体中提取数据并在其他地方使用它。

- MItrajyoti

---

jQuery文档中有很多例子，包括map函数的使用。 - jinglesthula