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,
    ...
  },
  ...
});

但我找不到任何等效的方法来获取具有多个选择的复选框的值。显而易见的东西不起作用:

<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 。是的，它会增加开销，但如果您没有数千个，那么这并不重要。