140

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

 $("#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]，上下文：文档，jquery：“1.9.1”，构造函数：函数，初始化：函数...]

我只想要 ID（在这种情况下为前 3 个项目）。

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

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

[“51729b62c9f2673e4c000004”、“517299e7c9f26782a7000003”、“51729975c9f267f3b5000002”]

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

谢谢

4

9 回答 9

289

在最后调用.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() 以使用基本数组是很常见的。

于 2013-04-23T13:52:37.637 回答
25

演示：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();
于 2013-04-23T13:54:33.160 回答
18

您需要添加到函数.toArray()的末尾.map()

$("#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/

于 2013-04-23T13:50:18.267 回答
10

我稍微重构了您的代码，并相信我提供了您正在寻找的解决方案。基本上而不是设置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);
});

我创建了一个运行代码的小提琴。

于 2013-04-23T13:53:32.357 回答
7 
     var ids = [];

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

这个对我有用！

于 2017-05-17T20:23:56.350 回答
3 
var idsArr = [];

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

console.log(idsArr);
于 2018-03-26T12:18:09.057 回答
1

需要将 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();
});

这里有很多答案有助于改进我的代码，但它们要么太复杂，要么不完全符合我的要求：Convert form data to JavaScript object with jQuery

有效但可以改进：仅适用于一维数组，结果索引可能不是顺序的。数组的长度属性返回下一个索引号作为数组的长度，而不是实际长度。

希望这有帮助。合十！

于 2016-10-05T00:41:16.737 回答
0

不要使用“每个”。它用于同一元素的操作和更改。使用“map”从元素主体中提取数据并在其他地方使用它。

于 2015-02-20T10:01:23.273 回答
0

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

  $(".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("");
        }
   }

});
于 2018-05-16T06:59:42.387 回答