jQuery将选中的复选框的值获取到数组中


129

我试图获取当前选中的所有复选框的值,并将它们存储到数组中。到目前为止,这是我的代码:

 $("#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,因为它可以节省一行代码并且更漂亮。

谢谢

Answers:


261

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


1
我期待从真正的数组$.map。感谢您的解决方案,它可以工作。
如果__name__为None 2013年

非常感谢您为我提供票务中心
史蒂文·

2
我没有得到的是为什么.get()当函数.val()从jQuery集合中的每个项目返回时,为什么需要的原因。这是因为map在将其传递给之前将其转换回jQuery对象searchIDs吗?
iconoclast 2013年

我们可以获取值作为数组类型吗?
krutssss


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/


10

我对您的代码进行了一些重构,并相信我提供了您正在寻找的解决方案。基本上,不是将其设置searchIDs.map()I 的结果,而是将值推入数组中。

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

  var searchIDs = [];

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

  console.log(searchIDs);
});

我在运行代码的过程中创建了一个小提琴


5
     var ids = [];

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

这个为我工作!


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

这里有大量的答案可以帮助改善我的代码,但是它们要么太复杂,要么就不是我真正想要的:用jQuery将表单数据转换为JavaScript对象

有效,但可以改进:仅适用于一维数组,并且所得索引可能不是顺序的。数组的length属性返回下一个索引号作为数组的长度,而不是实际的长度。

希望这会有所帮助。Namaste!



0

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


jQuery文档为大多数内容提供了出色的示例,包括map
jinglesthula

0

这里允许的是页面上的复选框类,而var allow则将它们收集在一个数组中,您可以检查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("");
        }
   }

}); 
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.