javascript - 如何在没有 jQuery 的情况下使用 JavaScript 遍历每个带有类名的选中复选框

Question

对于下面的 jquery 代码，在 javascript 中是否有直接的等价物？

$('.checkbox').each(function() {
    if ($(this).is(':checked')) {
        //logic here
    }
});

我正在尝试使用 class = 'checkbox' 遍历页面上的所有复选框 - 客户不想使用 jQuery，因此我需要一个替代方案。

我希望我可以避免从头开始编写一个长函数来执行此操作，而只是使用 JavaScript 内置的东西，但看起来这是不可能的。

Answer 1

许多旧版浏览器不支持 querySelectorAll或 getElementsByClassName ，所以你必须遍历所有 <input>这些浏览器中的元素。不过，最好先检查这些功能。

其次，你不应该使用 $(this).is(":checked") — 甚至在 jQuery 中也没有 — 在查找 this.checked 时，这是一条非常缓慢的路径.

这应该让你继续:

var base = document,
    inps, tmp, i = 0, reg = /\bcheckbox\b/;

// getElementsByClassName is the fastest method
if (base.getElementsByClassName)
    inps = base.getElementsByClassName("checkbox");
// Followed by querySelectorAll
else if (base.querySelectorAll)
    inps = base.querySelectorAll(".checkbox");
// But if neither exist, loop through all the elements and check the class
else {
    inps = [];
    var tmp = base.getElementsByTagName("input");
    i = tmp.length;
    while (i--) {
        if (reg.test(tmp[i].className)
            inps.push(tmp[i]);
    }
}

// Finally, loop through the matched elements and apply your logic
i = inps.length;
while (i--) {
    var current = inps[i];
    if (current.checked) {
        // logic here
    }
}

在上面的示例中，您可以更改 base 的值对任何元素。这意味着，如果所有这些元素都有一个共同的父节点或祖先节点，您可以将该元素设置为基础，它应该运行得更快，例如:

var base = document.getElementById("myForm");