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

作者：

在

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

<!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函数都将被调用，然后您可以在该函数中执行所需的代码。

评论

发表回复取消回复

更多文章