时间戳

首页 > 解决方案 > 如何使用for循环获得多个拨动开关的真假？

javascript - 如何使用for循环获得多个拨动开关的真假？

问题描述

https://www.w3schools.com/code/tryit.asp?filename=GKTIU8SG2RMP

document.addEventListener('DOMContentLoaded', function () {
  var checkbox = document.querySelector('input[type="checkbox"]');

  checkbox.addEventListener('change', function () {
    if (checkbox.checked) {
      // do this
      console.log('Checked');
    } else {
      // do that
      console.log('Not checked');
    }
  });
});

在链接上方，当单击第一个按钮时，我完美地获得了它的状态（选中或未选中）。但是，对于第二个按钮，它不显示状态（选中或未选中）。我该如何解决这个问题？非常感谢您的关注。注意：我正在为按钮使用 for 循环，因此会有很多按钮，如果解决方案是一一声明按钮，则效率低下。

标签： javascripthtml

解决方案

querySelector找到与选择器匹配的第一个元素。如果要查找多个，请使用querySelectorAllwhich 返回 a NodeList（类似于数组）。例如：

function checkboxChangeHandler() {
    if (this.checked) { // <== Note use of `this`
        // do this
        console.log('Checked');
    } else {
        // do that
        console.log('Not checked');
    }
}
document.addEventListener('DOMContentLoaded', function () {
    var checkboxes = document.querySelectorAll('input[type="checkbox"]');
    checkboxes.forEach(function(checkbox) {
        checkbox.addEventListener('change', checkboxChangeHandler);
    });
});

注意：该代码是用 ES5 编写的，因为您的原始代码是，但通常我会使用 ES2015+ 特性const和可迭代性。

注 2：该代码依赖于2017 年左右添加的forEach方法。NodeList但是对于过时的环境，它很容易填充，我在另一个 SO 答案中描述了如何。

推荐阅读