Question

我试图从复选框中获取一些数据值，如下所示。

<input type="checkbox" data-administration="" data-dosage="" data-date="" disabled checked/>
<input type="checkbox" data-administration="" data-dosage="" data-date="" checked/>
<input type="checkbox" data-administration="" data-dosage="" data-date=""/>

我只想从已选中但未禁用的复选框中获取数据，因此我的选择器如下所示：

var dosages = $('input[type="checkbox"]:checked:not(:disabled)');

似乎工作正常，但是当我尝试获取这样的值时：

for (var index = 0; index < dosages.size(); index++) {
    console.log(dosages[index].data('date'));
  }

我得到了一个＆＃34;数据不是一个功能＆＃34;错误。的console.log（剂量[指数]）;以这种形式返回元素：

<input type="checkbox" data-date="21.10.2014" data-dose="" data-administration="16" style="position: absolute; opacity: 0;">

任何线索或建议我如何更有效地做到这一点？

Answer 1

使用括号表示法检索给定索引处的对象，您将检索DOM节点，而不是jQuery对象;你需要使用eq()：

dosages.eq(index).data('date')

老实说，你可以更容易地做到这一点，同时避免for循环：

dosages.each(function () {
    console.log($(this).data('date'));
});

如果要检索这些值的数组：

var dates = dosages.map(function () {
    return $(this).data('date');
 }).get();

Answer 2

这不起作用的原因是在jQuery对象中可迭代的元素是原始dom节点，而不是单独的jQuery元素。您可以使用dosages.eq(index)为每个获取jQuery对象，但不需要它。

如果使用raw元素，则可以通过element.dataset对象而不是element.data()函数访问数据属性，这是一个jQuery构造。

或者，即使在古老的浏览器中，使用getAttribute代替数据API也适用于所有地方。不需要jQuery。

for (var index = 0; index < dosages.size(); index++) {
    console.log(dosages[index].getAttribute('data-date'));
}

Answer 3

这是因为你在DOM元素而不是jQuery对象上调用.data（jQuery函数）。

更改

dosages[index].data('date')

到

$(dosages[index]).data('date')

<强>除了

您提供的代码也可以重构为使用jQuery的each（如果您愿意）：

$.each(dosages, function()
{
    console.log($(this).data('date'));
});

Answer 4

您需要.eq()

for (var index = 0; index < dosages.size(); index++) {
   console.log(dosages.eq(index).data('date'));
}

复选框中的数据值

4 个答案: