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参考 | CSS3参考),因为你的值包括[],这对CSS中没有引号的值无效.(在CSS中,没有引号,值必须是标识符.)

旁注2:注意我this.value在上面的迭代器函数中使用得到的值input,而不是$(this).val().它几乎只是一种风格的东西,从各个方面来看都不比另一种更好.this.value更直接,如果你完全了解DOM(每个网络程序员都应该),那就非常清楚了.但是,当然,虽然完全可靠的跨浏览器与复选框和大多数其他input元素,它不是可靠的跨浏览器与一些其他表单字段(select例如,框).$(this).val()在jQuery密集型应用程序中更加惯用,你不必担心this是a input还是a select.是的,它增加了开销,但如果你没有数千个,那就不重要了.