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

在网页开发中，你可能需要根据用户的选择来在页面上显示或隐藏某个特定的元素。使用单选按钮（radio button）来实现这个功能非常简单而直观。

基本思路

使用单选按钮来控制某个 div 元素的显示和隐藏，我们可以借助 JavaScript 来监听单选按钮的状态变化，并通过修改 CSS 属性来控制目标 div 元素的显示或隐藏。

以下是实现的基本步骤：

1. 创建单选按钮和目标 div 元素；
2. 给单选按钮添加 onchange 事件监听器；
3. 在事件监听器中判断单选按钮的状态，若为选中状态，则显示目标 div 元素，否则隐藏目标 div 元素。

示例代码

首先，在 HTML 中添加单选按钮和目标 div 元素：

<input type="radio" name="option" value="show" onchange="toggleDiv(this)">
<label for="show">显示</label>
<input type="radio" name="option" value="hide" checked onchange="toggleDiv(this)">
<label for="hide">隐藏</label>

<div id="target-div">
  这里是目标 div 元素
</div>

在上面的示例中，我们使用了两个单选按钮，一个用于显示(div的默认状态)，一个用于隐藏。单选按钮的 onchange 事件会调用 toggleDiv 函数来控制目标 div 元素的显示和隐藏。

接下来，我们需要在 JavaScript 中定义 toggleDiv 函数，具体实现如下：

function toggleDiv(element) {
  var targetDiv = document.getElementById("target-div");
  if (element.value === "hide") {
    targetDiv.style.display = "none";
  } else {
    targetDiv.style.display = "block";
  }
}

在这个函数中，我们首先通过 document.getElementById 获取目标 div 元素，然后根据单选按钮的 value 来判断用户的选择。若单选按钮的 value 为 "hide"，则将目标 div 元素的 display 样式设置为 "none"，表示隐藏；否则设置为 "block"，表示显示。

进一步扩展

上面的示例实现了最基础的单选按钮控制显示和隐藏 div 元素的功能。然而，你可以进一步扩展这个功能，来满足更多的需求，比如：

• 添加多组单选按钮和对应的目标 div 元素；
• 切换显示和隐藏时添加动画效果；
• 改变目标 div 元素的样式而不仅仅是显示和隐藏。

你可以通过修改 JavaScript 部分的代码来实现上述扩展。

以上就是使用单选按钮显示和隐藏 div 元素的基本介绍，通过以上的步骤和示例代码，相信你现在已经具备了实现这一功能的基础知识。