如何使用单选按钮显示和隐藏 div 元素？

为了通过在 jQuery 中选择特定的单选按钮来显示特定元素的数据/内容，我们可以使用以下两种方法：

1. hide() 方法：该方法用于隐藏您要隐藏的 html 语法或元素。
   句法：

   $(selector).hide(speed, callback);

2. show() 方法：此方法用于显示您希望用户看到的 html 的语法或元素。
   句法：

   $(selector).show(speed, callback);

方法：

• 单选按钮的选择器名称与用于显示
  内容。
• 使用 display: none;将每个元素的 CSS display 属性设置为 none;
• 使用show()方法显示元素，否则使用hide()方法隐藏。

示例 1：

  

    
      Show and Hide div elements using radio buttons
    
    
    
    
        .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 radio buttons
        
        
            
                 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="radio"]').click(function() {
                    var inputValue = $(this).attr("value");
                    var targetBox = $("." + inputValue);
                    $(".selectt").not(targetBox).hide();
                    $(targetBox).show();
                });
            });
        
    

  

输出：

• 在选择任何单选按钮之前：
  
• 选择单选按钮后：
  

示例 2：与警报方法一起使用。

  

    
      Show and Hide div elements using radio buttons
    
    
    
    
        .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 radio buttons
        
        
            
                 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="radio"]').click(function() {
                    var inputValue = $(this).attr("value");
                    var targetBox = $("." + inputValue);
                    $(".selectt").not(targetBox).hide();
                    $(targetBox).show();
                    alert("Radio button " + inputValue + " is selected");
                });
            });
        
    

  

输出：

• 在选择任何单选按钮之前：
  
• 选择单选按钮后：
  
• 选择单选按钮后：
  

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