如何使用javascript在单选按钮被选中时显示元素，在未被选中时隐藏元素？

要使用JavaScript在单选按钮被选中时显示元素，在未被选中时隐藏元素，你可以使用以下方法：

HTML结构

首先，创建一些单选按钮和一个需要显示或隐藏的元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Radio Button Toggle</title>
    <style>
        #hiddenElement {
            display: none;
        }
    </style>
</head>
<body>
    <input type="radio" id="radio1" name="toggle" value="show">
    <label for="radio1">Show Element</label>
    <input type="radio" id="radio2" name="toggle" value="hide">
    <label for="radio2">Hide Element</label>

    <div id="hiddenElement">
        This element will be shown or hidden based on the radio button selection.
    </div>

    <script src="script.js"></script>
</body>
</html>

JavaScript代码

接下来，编写JavaScript代码来处理单选按钮的选中状态变化：

// script.js
document.addEventListener('DOMContentLoaded', function() {
    const radioButtons = document.getElementsByName('toggle');
    const hiddenElement = document.getElementById('hiddenElement');

    function updateVisibility() {
        if (document.querySelector('input[name="toggle"]:checked').value === 'show') {
            hiddenElement.style.display = 'block';
        } else {
            hiddenElement.style.display = 'none';
        }
    }

    radioButtons.forEach(radioButton => {
        radioButton.addEventListener('change', updateVisibility);
    });

    // Initial check
    updateVisibility();
});

解释

HTML结构：
- 创建了两个单选按钮，它们的name属性相同，这样它们是互斥的（即只能选中一个）。
- 创建了一个div元素，初始状态下是隐藏的（通过CSS设置display: none）。

JavaScript代码：
- 使用DOMContentLoaded事件确保DOM完全加载后再执行脚本。
- 获取所有单选按钮和需要显示/隐藏的元素。
- 定义一个updateVisibility函数，该函数检查哪个单选按钮被选中，并根据选中值更新元素的显示状态。
- 为每个单选按钮添加change事件监听器，当单选按钮状态改变时调用updateVisibility函数。
- 初始调用updateVisibility函数以确保页面加载时元素的显示状态正确。