📌  相关文章
📜  如何使用复选框显示和隐藏 div 元素?

📅  最后修改于: 2022-05-13 01:56:00.841000             🧑  作者: Mango

如何使用复选框显示和隐藏 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
    
    
    

  

    
        

            GeeksforGeeks          

        

          Show and Hide div elements using checkbox         

        
                                                            
        
          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.
             
                     

输出:



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

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



  

    
      Show and Hide div elements using checkbox
    
    
    

  

    
        

           GeeksforGeeks          

        

          Show and Hide div elements using checkbox         

        
                                                            
        
          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.
             
                       

输出:

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

示例 3:与警报方法一起



  

    
      Show and Hide div elements using checkbox
    
    
    

  

    
        

            GeeksforGeeks          

        

          Show and Hide div elements using checkbox         

        
                                                            
        
          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.
             
      

输出:

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

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