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

Posted 2023-03-05

【中文标题】jQuery：将复选框的值作为数组返回？

【英文标题】：jQuery: Returning the value of a checkbox as an array?

【发布时间】：2012-01-14 11:34:48

【问题描述】：

这让我很困惑。我可以轻松地将多选的值作为数组获取，并将其传递给 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

有什么想法吗？谢谢。

【问题讨论】：

将属性选择器用引号括起来。 $('input:checkbox[name="check[]"]').val();

谢谢大家 - 我在这里学到了很多东西。我不喜欢 'answer tick' 的东西，但给了它 TJC，因为他早了一分钟... :) 不过我喜欢 jsFiddle 的东西。

【参考方案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。是的，它增加了开销，但如果你没有数千个，这并不重要。

【讨论】：

如果将属性选择器放在字符串中，则不需要转义方括号，例如you're supposed to:$('input:checkbox[name="check[]"]').val();。

@Rocket：谢谢。奇怪的是，我只是在想“嘿，等等，我忘了 jQuery 需要引号”（这是 jQuery 的东西，而不是 CSS 的东西）。

【参考方案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

【讨论】：

如果将属性选择器放在字符串中，则不需要转义方括号，例如you're supposed to:$('input:checkbox[name="check[]"]').val();。

@Rocket 谢谢，在 TJ 的回答下看到了你的评论，并且已经开始纠正我的问题。

【参考方案3】：

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

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

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