js单选按钮不选中隐藏

在JavaScript中，如果你希望当某个单选按钮未被选中时隐藏某个元素，可以通过监听单选按钮的状态变化来实现。以下是一个简单的示例，展示了如何根据单选按钮的选中状态来显示或隐藏一个元素。

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单选按钮控制显示隐藏</title>
</head>
<body>

<input type="radio" name="toggle" value="show" checked> 显示
<input type="radio" name="toggle" value="hide"> 隐藏

<div id="content" style="display: block;">
  这里是需要根据单选按钮状态显示或隐藏的内容。
</div>

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

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', function() {
  // 获取所有的单选按钮
  var radios = document.getElementsByName('toggle');
  // 获取需要控制显示隐藏的元素
  var content = document.getElementById('content');

  // 定义一个函数来根据单选按钮的状态更新元素的显示状态
  function updateDisplay() {
    for (var i = 0; i < radios.length; i++) {
      if (radios[i].checked && radios[i].value === 'hide') {
        content.style.display = 'none';
        break;
      } else {
        content.style.display = 'block';
      }
    }
  }

  // 初始化显示状态
  updateDisplay();

  // 为每个单选按钮添加事件监听器
  for (var i = 0; i < radios.length; i++) {
    radios[i].addEventListener('change', updateDisplay);
  }
});

解释

HTML部分：创建了两个单选按钮和一个需要控制显示隐藏的div元素。
JavaScript部分：
- 使用DOMContentLoaded事件确保DOM完全加载后再执行脚本。
- 获取所有的单选按钮和目标div元素。
- 定义updateDisplay函数来检查哪个单选按钮被选中，并据此更新div的显示状态。
- 初始化时调用updateDisplay函数设置正确的显示状态。
- 为每个单选按钮添加change事件监听器，以便在用户更改选择时更新显示状态。