单选按钮选择时显示/隐藏div

单选按钮选择时显示/隐藏div，是一种常见的前端开发技术，用于根据用户的选择动态显示或隐藏某个页面元素。

具体实现方式可以通过JavaScript或者jQuery来完成。以下是一个实现的示例代码：

HTML代码：

<input type="radio" name="options" value="option1" onclick="showDiv()"> Option 1
<input type="radio" name="options" value="option2" onclick="showDiv()"> Option 2

<div id="div1" style="display:none;">
    This is div 1
</div>

<div id="div2" style="display:none;">
    This is div 2
</div>

JavaScript代码：

function showDiv() {
    var option1 = document.querySelector('input[value="option1"]');
    var option2 = document.querySelector('input[value="option2"]');
    var div1 = document.getElementById('div1');
    var div2 = document.getElementById('div2');

    if (option1.checked) {
        div1.style.display = "block";
        div2.style.display = "none";
    } else if (option2.checked) {
        div1.style.display = "none";
        div2.style.display = "block";
    }
}

以上代码中，我们定义了两个单选按钮选项，并为其绑定了onclick事件，当用户选择其中一个选项时，会触发showDiv()函数。

showDiv()函数首先获取选项和对应的div元素，然后根据选项的状态来判断显示哪个div。当选中Option 1时，将div1显示，div2隐藏；当选中Option 2时，将div1隐藏，div2显示。

这种技术常用于动态显示/隐藏表单元素、条件性加载内容、根据用户选择改变页面布局等场景。

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