js 监听所有复选框一旦有变化将执行某段代码

k, k • 2023-10-02 • JavaScript

如果您希望在任意一个或多个复选框发生变化时执行某段代码，您可以将事件监听器添加到每个复选框上，并在事件处理函数中执行所需的代码。以下是一个示例：

<!DOCTYPE html>  
<html>  
<head>  
  <title>监控复选框变化</title>  
</head>  
<body>  
  <input type="checkbox" id="checkbox1">  
  <input type="checkbox" id="checkbox2">  
  <input type="checkbox" id="checkbox3">  
  
  <script>  
    // 获取复选框的引用  
    const checkboxes = document.querySelectorAll('input[type="checkbox"]');  
  
    // 监听每个复选框的变化事件  
    checkboxes.forEach(checkbox => {  
      checkbox.addEventListener('change', handleCheckboxChange);  
    });  
  
    // 处理复选框变化事件的函数  
    function handleCheckboxChange() {  
      // 在这里执行所需的代码  
      console.log('One or more checkboxes have changed.');  
    }  
  </script>  
</body>  
</html>

在上面的示例中，我们使用document.querySelectorAll获取了页面上所有复选框的引用，并将事件监听器添加到每个复选框上。当任意一个复选框发生变化时，handleCheckboxChange函数都将被调用，然后您可以在该函数中执行所需的代码。

版权声明：
作者：k, k
链接：http://kuyour.top/index.php/2023/10/02/js-%e7%9b%91%e5%90%ac%e6%89%80%e6%9c%89%e5%a4%8d%e9%80%89%e6%a1%86%e4%b8%80%e6%97%a6%e6%9c%89%e5%8f%98%e5%8c%96%e5%b0%86%e6%89%a7%e8%a1%8c%e6%9f%90%e6%ae%b5%e4%bb%a3%e7%a0%81/
来源：KuKey
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
打赏
海报
js 监听所有复选框一旦有变化将执行某段代码
如果您希望在任意一个或多个复选框发生变化时执行某段代码，您可以将事件监听器添加到每个复选框上，并在事件处理函数中执行所需的代码。以下是一个示例： <……
<<上一篇
下一篇>>