使用 jQuery 获取 HTML 数组的值答案

【问题标题】：Getting value of an HTML array with jQuery使用 jQuery 获取 HTML 数组的值
【发布时间】：2014-09-16 15:49:10
【问题描述】：

我有一个这样的输入框数组。

<form>
  9 <input type="checkbox" name="date[]" value="9">
  10 <input type="checkbox" name="date[]" value="10">
  11 <input type="checkbox" name="date[]" value="11">
</form>

我需要存储在日期数组中的值，以将其传递给 ajax 调用。

我试过了

    console.log($("input[name^=date]").val());

但这只会输出 9。我总是可以检查单个元素是否被检查，然后获取它们的值，创建一个数组并将其传递给 ajax 调用，但是有没有办法直接做到这一点？

编辑：为什么console.log($("input[name^=date]").val()); 只输出 9？

【问题讨论】：

来自api.jquery.com/val 的第一行：获取匹配元素集中第一个元素的当前值。（强调我的）

标签： jquery arrays ajax html

【解决方案1】：

你可以这样做：

var values = $("input[name='date[]']:checked").map(function() {
    return this.value;
}).get();

values 将是选中框的值的数组。

【讨论】：

【解决方案2】：

如果您通过 ajax 提交数据，您只需 serialize 表单即可获取所有数据，已经进行了 URL 编码：

 $('form').serialize();

例如，如果所有的复选框都被选中，你会得到如下数据：

date%5B%5D=9&date%5B%5D=10&date%5B%5D=11 
//which is date[]=9&date[]=10&date[]=11

而PHP可以轻松处理数组参数：date[]。

【讨论】：

太棒了！我不知道.serialize()。 jQuery 继续给我惊喜！

【解决方案3】：

试试each

var arr = []
$("input[name^=date]").each(function(){
     arr.push($(this).val())

})

Fiddle

【讨论】：