如何在不使用 jQuery 的情况下使用 JavaScript 运行带有类名的每个选中的复选框

Question

javascript 中是否有与下面的 jquery 代码直接等效的代码？

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

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

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

Answer 1

许多旧版浏览器不支持 querySelectorAll 或 getElementsByClassName，因此您必须循环遍历这些浏览器中的所有 元素。不过，最好先检查这些功能。

其次，你永远不应该使用 $(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");

Answer 2

var checkboxes = document.getElementsByClassName('checkbox');

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

请参阅下面的评论。对于旧版本的 IE 和其他旧浏览器，您可以使用 getElementsByTagName。

Answer 3

尝试以下操作

var all = document.getElementsByClassName('checkbox');
for (var i = 0; i < all.length; i++) {
  var current = all[i];
  if (current.checked) {
    // Logic here
  }
}

Answer 4

JavaScript 具有通过 ID 或标记名称获取 DOM 元素的内置方法，但通过类进行选择 旧版本的 IE 不支持。但是，获取所有 input 并测试它们的 checkbox 类型会相当快：

var x=document.getElementsByTagName("input");
for (var i=0; i<x.length; i++) {
    if (x[i].type === "checkbox" && x[i].checked) {
        // do something
    }
} 

您还可以测试它们的类是否为“checkbox”，但这会变得复杂如果他们有多个班级。如果他们不这样做：

var x=document.getElementsByTagName("input");
for (var i=0; i<x.length; i++) {
    if (x[i].className === "checkbox" && x[i].checked) {
        // do something
    }
} 

Answer 5

这有点依赖于浏览器。但在现代浏览器中，您可以使用 document.getElementsByClassName('checkbox') 来获取要迭代的数组，然后 is(':checked')成为更常见的 if(array[i].checked){}。

请随意阅读有关兼容浏览器的信息。您会发现它在 Internet Explorer 5.5、6 和 7 中不起作用。

我认为 jQuery 在 这里很热闹。

所以它可能看起来像：

var allCheckbox;
if (document.getElementsByClassName) {
  allCheckbox = document.getElementsByClassName('checkbox');
} else {
  allCheckbox = new Array();
  var i = 0;
  var all = document.getElementsByTagName('*') {
  for (var j=0; j < all.length; j++) {
    //Comparison cribbed from sizzle
    if ((" " + (all[j].className || all[j].getAttribute("class")) + " ")
      .indexOf('checkbox') > -1
    ) {
      allCheckbox[i++] = all[j];
    }
  }
}
for (var i = 0; i < allChecked.length; i++) {
  if (allChecked[i].checked) {
    // Logic here
  }
}

最后注意：getElementsByTagName('*') 不适用于 Internet Explorer 5.5。