JQuery 将选中复选框的值放入数组

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

 $("#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”, Context: document，jquery: “1.9.1”，structor: function，init: 功能... ]

我想只是 ID 的(在这种情况下的前3个项目)。

通过使用 $.each并将值推入一个数组，我得到了所需的输出:

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

[“51729b62c9f2673e4c000004”，“517299e7c9f26782a7000003”, “51729975c9f267f3b500002”]

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

谢谢

289685 次浏览
小开

您需要将 .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/

小开
最佳答案

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

小开

我对您的代码进行了一些重构，相信我带来了您正在寻找的解决方案。基本上，我没有将 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);
});

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

小开

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

$(document).ready(function(){


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


return $(this).val();


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


});

只要调用 get () ，就会得到在 spec: http://api.jquery.com/map/中编写的数组

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

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

小开

需要将 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 属性返回下一个索引号作为数组的长度，而不是实际长度。

希望这个有用，合十礼！

小开 
     var ids = [];


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

这招对我管用！

小开 
var idsArr = [];


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


console.log(idsArr);
小开

这里允许在页面上使用 class 复选框，var 允许在数组中收集它们，您可以检查 check true in for loop，然后单独执行所需的操作。这里我已经设置了自定义有效性。我想这能解决你的问题。

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


});

提交答案