如果选中单选按钮，则显示隐藏div

是一种常见的前端交互效果，可以通过JavaScript来实现。

首先，在HTML中需要有一个单选按钮和一个需要隐藏或显示的div元素。可以使用input标签的type属性为radio来创建单选按钮，使用div标签来创建需要隐藏或显示的div元素。给单选按钮设置一个id属性，以便在JavaScript中获取该元素。给div元素设置一个id属性，并设置其初始样式为display:none，以便初始状态下隐藏该元素。

接下来，在JavaScript中，可以使用addEventListener方法来监听单选按钮的点击事件。当单选按钮被点击时，可以通过getElementById方法获取到需要隐藏或显示的div元素，并根据单选按钮的选中状态来设置div元素的display样式属性，以实现显示或隐藏的效果。

以下是一个示例代码：

HTML代码：

<input type="radio" id="radioBtn">选中单选按钮
<div id="hiddenDiv" style="display:none;">隐藏的div内容</div>

JavaScript代码：

var radioBtn = document.getElementById("radioBtn");
var hiddenDiv = document.getElementById("hiddenDiv");

radioBtn.addEventListener("click", function() {
  if (radioBtn.checked) {
    hiddenDiv.style.display = "block";
  } else {
    hiddenDiv.style.display = "none";
  }
});

在上述代码中，当单选按钮被点击时，通过判断radioBtn.checked属性的值来确定是否选中。如果选中，则将hiddenDiv的display样式属性设置为"block"，使其显示；如果未选中，则将display样式属性设置为"none"，使其隐藏。

这种实现方式可以用于各种场景，例如在表单中选择某个选项后显示相关的选项内容，或者在页面中切换不同的内容区域等。

腾讯云相关产品和产品介绍链接地址：