获取所有输入框并取其属性值

Question

我有一个复选框列表，选中后我应该获取它们并检索它们的属性值。

res.querySelectorAll('.node:checked')

这给了我一个检查输入元素的数组，我可以使用 for 循环遍历这个元素数组并执行

getAttribute('data-keyvalue')

每个。但是有没有可能把它们放在一行中，在

中

querySelectorAll

Answer 1

我遇到了同样的问题，最后我所有的搜索都达到了，你必须一次处理一个，然后自己构建一个数组或字符串。尝试创建一个函数来为您执行此操作，并且只要您需要全部获取它们，该函数就会以您需要的格式为您提供数据。

Answer 2

检查console，它会记录检查数据属性值的数组。

var chk = Array.prototype.slice.call(document.querySelectorAll('.node:checked')).map(function(node) {
  return node.getAttribute('data-keyvalue');
})
console.log(chk);

<input type="checkbox" class="node" checked data-keyvalue="1" />
<input type="checkbox" class="node" checked data-keyvalue="2" />
<input type="checkbox" class="node" checked data-keyvalue="3" />
<input type="checkbox" class="node" data-keyvalue="4" />
<input type="checkbox" class="node" data-keyvalue="5" />
<input type="checkbox" class="node" checked data-keyvalue="6" />
<input type="checkbox" class="node" checked data-keyvalue="7" />

Answer 3

您可以使用Array#from将querySelectorAll的NodeList输出转换为数组，然后使用array#map获取data-keyvalue属性选中复选框。

var checkboxAttributes = Array.from(document
  .querySelectorAll('.node:checked'))
  .map(input => input.getAttribute('data-keyvalue'));
console.log(checkboxAttributes);

<input class="node" data-keyvalue="7" type="checkbox" checked>
<input class="node" data-keyvalue="8" type="checkbox">
<input class="node" data-keyvalue="9" type="checkbox" checked>
<input class="node" data-keyvalue="10" type="checkbox" checked>
<input class="node" data-keyvalue="11" type="checkbox">

获取所有输入框并取其属性值

Get all input boxes and take their attribute values

javascript

getattribute