Question

例如：

var inputs = document.querySelectorAll('input[type="checkbox"]');

我想在所有输入上将checked设置为true。这可以像在jQuery中一样完成，而不使用for循环吗？

Answer 1

querySelectorAll会返回NodeList。您将需要遍历列表以更改其中的每个项目（jQuery在后台使用.each循环遍历整个集合）

您可以使用循环（for，while等），也可以使用forEach原型上的Array方法

https://developer.mozilla.org/en-US/docs/DOM/NodeList#Workarounds

Answer 2

不，如果没有对节点进行某种形式的迭代，就无法做到这一点。 jQuery也在节点上进行迭代，它只是将它隐藏在用户之外。

最接近jQuery风格的是在支持它的浏览器中使用.forEach ^[MDN]：

[].forEach.call(inputs, function() {
    this.checked = true;
});

Answer 3

不使用for循环

在某些时候，你需要某种形式的循环。你只是希望抽象出来吗？

NodeList与Array类似，因此您可以Array.prototype中的call或apply方法，包括iterators forEach() }}。示例from MDN：

另一种不扩展DOM的方法：

var forEach = Array.prototype.forEach;

var links = document.getElementsByTagName('a');
forEach.call(links, function(link){ // works in most browsers (please document here if you find browsers where it doesn't)
  link.style.color = '#0F0';
});

但请注意，即使forEach() depends on a loop（在这种情况下为while）。

Answer 4

使用纯JavaScript，您可以使用querySelectorAll()函数，如下所示：

var checkboxes = document.querySelectorAll('input[type="checkbox"]');

for(var i=0; i<checkboxes.length; i++) {  checkboxes[i].checked = true; }

不幸的是，这并不能避免我知道你想要避免的循环，它也没有完美的跨浏览器兼容性，因为可以通过IE 8检查here只能连接到CSS 2.1选择器并且Pre IE8根本不受支持，但它是最好的，可以在不使用大量代码和避免jQuery的情况下完成。

我知道你想避免使用jQuery但是，如果你改变主意，你可以尝试以下方法：

$('input[type="checkbox"]').attr('checked', 'checked')

这应该挂钩任何复选框输入并使用jQuery attr()函数设置其属性。

如果这不起作用，请尝试给复选框添加自己的类名，例如复选框，并尝试如下：

$('.checkbox').attr('checked', 'checked')

这有助于解决兼容性问题并避免循环，但如果您不想使用jQuery路由，请忽略。

我可以直接更新所有元素的属性吗？

4 个答案: