如何使用复选框显示和隐藏 div 元素？

为了通过选择 jQuery 中的特定复选框来显示特定元素的数据/内容，我们可以使用toggle() 方法。
toggle() 方法用于检查被选元素的可见性，以便在被选元素的 hide() 和 show() 之间切换。

句法：

$(selector).toggle(speed, easing, callback)

方法：

• 复选框的选择器名称与用于显示复选框的元素相同
  内容。
• 使用 display: none;将每个元素的 CSS display 属性设置为 none;用于最初隐藏元素。
• 使用.toggle() 方法显示和隐藏用于选中和取消选中框的元素。

示例 1：使用复选框显示内容。

  

    
      Show and Hide div elements using checkbox
    
    
    
        .selectt {
            color: #fff;
            padding: 30px;
            display: none;
            margin-top: 30px;
            width: 60%;
            background: green
        }
          
        label {
            margin-right: 20px;
        }
    

  

    
         
          GeeksforGeeks 
        
        
          Show and Hide div elements using checkbox
        
        
            
                 C
            
                 C++
            
                 Python
            
                 Java
        
        
          C
          is a procedural programming language
        
          C++ 
          is a general purpose programming language
        
          Python 
          is a widely used general-purpose, high level 
          programming language.
        
          Java 
          is a most popular programming language 
          for many years.
        
            $(document).ready(function() {
                $('input[type="checkbox"]').click(function() {
                    var inputValue = $(this).attr("value");
                    $("." + inputValue).toggle();
                });
            });
        
    

  
                  

输出：

• 在选择任何复选框之前：
  
• 选中一个复选框后：
  
• 选中这两个复选框后：
  

示例 2：使用复选框隐藏内容

  

    
      Show and Hide div elements using checkbox
    
    
    
    
        .selectt {
            color: #fff;
            padding: 30px;
            margin-top: 30px;
            width: 60%;
            background: green
        }
          
        label {
            margin-right: 20px;
        }
    

  

    
         
         GeeksforGeeks 
        
        
          Show and Hide div elements using checkbox
        
        
            
                 C
            
                 C++
            
                 Python
            
                 Java
        
        
          C 
          is a procedural programming language
        
          C++
          is a general purpose programming language
        
          Python
          is a widely used general-purpose, high level
          programming language.
        
          Java
          is a most popular programming language for
          many years.
        
            $(document).ready(function() {
                $('input[type="checkbox"]').click(function() {
                    var inputValue = $(this).attr("value");
                    $("." + inputValue).toggle();
  
                });
            });
        
    

  
                    

输出：

• 在选择任何复选框之前：
  
• 选中一个复选框后：
  
• 选中这两个复选框后：
  

示例 3：与警报方法一起

  

    
      Show and Hide div elements using checkbox
    
    
    
    
        .selectt {
            color: #fff;
            padding: 30px;
            display: none;
            margin-top: 30px;
            width: 60%;
            background: green
        }
          
        label {
            margin-right: 20px;
        }
    

  

    
         
          GeeksforGeeks 
        
        
          Show and Hide div elements using checkbox
        
        
            
                 C
            
                 C++
            
                 Python
            
                 Java
        
        
          C 
          is a procedural programming language
        
          C++ 
          is a general purpose programming language
        
          Python 
          is a widely used general-purpose, high level 
          programming language.
        
          Java 
          is a most popular programming language for
          many years.
        
            $(document).ready(function() {
                $('input[type="checkbox"]').click(function() {
                    var inputValue = $(this).attr("value");
                    $("." + inputValue).toggle();
                    alert("Checkbox " + inputValue + " is selected");
                });
            });
        
    

  
   

输出：

• 在选择任何复选框之前：
  
• 选中复选框后：
  
• 单击警报确定按钮后：
  

jQuery 是一个开源 JavaScript 库，它简化了 HTML/CSS 文档之间的交互，它以其“少写，多做”的理念而广为人知。
您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。