如何在 HTML 中的一个复选框和一组复选框之间切换？

给定一个包含一个复选框和一组复选框的 HTML 文档，任务是在 JavaScript 的帮助下在它们之间切换。

我们可以通过使用 onChange() 事件来实现这一点，每当我们选中或取消选中复选框时都会触发该事件。

我们可以通过一个函数来这个事件应该取消使用foreach循环中组中的所有复选框，如果单独的复选框被选中，也应该取消单独的，每当我们签任何复选框组中的复选框。

句法：

let groupCheck = Array.from(document.getElementsByName('group'))
let sepCheck = document.getElementById('sep')
    
groupCheck.forEach(element => {
    element.onchange = () => {
        if (element.checked) {
            sepCheck.checked = false;
        }
    }
})
    
sepCheck.onchange = () => {
    if (sepCheck.checked) {
        groupCheck.forEach(element => {
            element.checked = false;
        })
    }
}}

例子：

HTML

  

    
    
  
    
        How to toggle between one checkbox 
        and a whole group of checkboxes?
    
  
    
        body {
            text-align: center;
            margin-top: 30%;
        }
  
        h1 {
            color: green;
        }
  
        p {
            margin-top: 4%;
        }
  
        label {
            margin-left: 3%;
        }
    

  

    GeeksforGeeks
  
    
        How to toggle between one checkbox 
        and a whole group of checkboxes?
    
  
    
        First
        
          
        Second
        
          
        Third
        
    
  
  
    
        Separate
        
    
  
    
  
        // Returns an array of all the 
        // checkboxes in the group
        let groupCheck = Array.from(
            document.getElementsByName('group'))
  
        // Returns the separate checkbox
        let sepCheck = document.getElementById('sep')
  
        groupCheck.forEach(element => {
  
            // Setting onChange event for every
            // checkbox in the group
            element.onchange = () => {
                if (element.checked) {
  
                    // Unchecking the checkbox
                    sepCheck.checked = false;
                }
            }
        })
  
        // Setting onChange event for the
        // separate checkbox 
        sepCheck.onchange = () => {
            if (sepCheck.checked) {
                groupCheck.forEach(element => {
  
                    // Unchecking the checkbox
                    element.checked = false; 
                })
            }
        }
    

  

输出：