jQuery：将复选框的值作为数组返回？

Question

这让我很困惑。我可以轻松地将多选的值作为数组获取，并将其传递给 ajax 请求：

<select id="countries" class="multiselect" multiple="multiple" name="countries[]">
  <option value="AFG">Afghanistan</option>
  <etc>
...
$countries_input = $("#countries");
var countries = $countries_input.val();
$.ajax({
  data: {
    country : countries,
    ...
  },
  ...
});

但我找不到任何等效的方法来获取具有多个选择的 checkbox 的值。明显的东西不起作用：

<input type="checkbox" name="check[]" value="foo1"/>foo1<br/>
<input type="checkbox" name="check[]" value="foo2"/>foo2<br/>
...
var bar = $('input:checkbox[name=check]').val();         // undefined
var bar = $('input:checkbox[name=check[]]').val();       // also undefined
var bar = $('input:checkbox[name=check]:checked').val(); // also undefined

有什么想法吗？谢谢。

Answer 1

没有内置的 jQuery 函数。你必须自己做。您可以通过一个简单的循环轻松完成：

var vals = []
$('input:checkbox[name="check[]"]').each(function() {
    vals.push(this.value);
});

或者如果你只想要选中的：

var vals = []
$('input:checkbox[name="check[]"]').each(function() {
    if (this.checked) {
        vals.push(this.value);
    }
});

或者你可以使用map和get：

var vals = $('input:checkbox[name="check[]"]').map(function() {
    return this.value;
}).get();

或者如果你只想要选中的：

var vals = $('input:checkbox[name="check[]"]').map(function() {
    return this.checked ? this.value : undefined;
}).get();

---

旁注 1：jQuery 要求属性值选择器（上述类型）中的值总是 用引号引起来，尽管在撰写本文时，尽管有文件证明它仍然很松懈。这是一个 jQuery 的东西，但在这种情况下，CSS 也需要它 (CSS2 Reference | CSS3 Reference)，因为您的值包括 []，这对于 CSS 中没有引号的值无效。 （在 CSS 中，不带引号的值必须是 identifiers。）

---

旁注2：注意我在上面的迭代器函数中使用this.value 来获取input 的值，而不是$(this).val()。这几乎只是一种风格的东西，从各个角度来看，两者都不比另一个更好。 this.value 更直接，如果您完全了解 DOM（并且每个 Web 程序员都应该），那就非常清楚了。但是，当然，虽然带有复选框和大多数其他 input 元素的跨浏览器完全可靠，但对于其他一些表单字段（例如select 框）来说，它不是可靠的跨浏览器。 $(this).val() 在 jQuery 密集型应用程序中更为惯用，您不必担心 this 是 input 还是 select。是的，它增加了开销，但如果你没有数千个，这并不重要。

Answer 2

• 如果您不熟悉.map() 方法，让我介绍一个我最喜欢的方法。手册页上的示例还具有复选框。 .get() 方法可用于将 jQuery 集合转换为对象。

.map(): 通过一个函数传递当前匹配集中的每个元素， 生成一个包含返回值的新 jQuery 对象。

• 您需要的其他知识是您在属性选择器中使用反斜杠转义[]：name=check\[\]]。 编辑：当然如果你使用标准的属性选择器语法是没有问题的：name="check[]"

这样就足够了：

var checkedValues = $('input:checkbox[name="check[]"]:checked').map(function () {
    return $(this).val();
}).get();

jsFiddle Demo

Answer 3

我认为 serialize() 和 serializeArray() 数组会起作用，但显然它们仅适用于选择的子项。

最坏的情况我会使用 map() 来获取这样的数组

country : $("your input selector").map(function() {return $(this).val();})