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

How to run through each checked checkbox with a classname using JavaScript without jQuery

本文关键字：行带 运行 复选框 JavaScript jQuery 情况下      更新时间：2023-09-26

下面的jquery代码在javascript中有直接等价物吗？

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

我正在尝试使用class = 'checkbox'运行页面上的所有复选框——客户端不想使用jQuery，所以我需要一个替代方案。

我希望我可以避免从头开始编写一个长函数来实现这一点，只需使用JavaScript内置的东西，但这看起来是不可能的。

许多较旧的浏览器不支持querySelectorAll或getElementsByClassName，因此您必须遍历这些浏览器中的所有<input>元素。不过，最好先检查一下这些函数。

其次，永远不要使用$(this).is(":checked")—甚至在jQuery中都没有—在查找CCD_ 6时，这是一条非常缓慢的路径。

这应该会让你开始：

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");

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

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

尝试以下

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

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
    }
}

您还可以测试他们的类是否为"复选框"，但如果他们有多个类，这会变得复杂。如果他们不这样做：

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

这有点依赖于浏览器。但在现代浏览器中，您可以使用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。

相关文章：