如何用单选按钮隐藏同class元素并显示指定id元素？

问题分析 #

你的代码主要存在两个问题：

• 所有单选按钮的id重复（均为radio-one），HTML中id必须唯一，这会导致DOM选择器异常。
• querySelectorAll的选择器写法错误，变量divId需要通过模板字符串拼接成有效的CSS选择器，正确排除指定id的写法是:not(#${divId})（id选择器需加#前缀）。

修正后的代码 #

<html>
  <body>
    <!-- 添加基础样式方便查看效果 -->
    <style>
      .my-divs {
        width: 100px;
        height: 100px;
        margin: 10px;
        float: left;
        background-color: #ccc;
        opacity: 0; /* 初始隐藏所有div */
      }
    </style>

    <div id="div-one" class="my-divs"></div>
    <div id="div-two" class="my-divs"></div>
    <div id="div-three" class="my-divs"></div>
    <div id="div-four" class="my-divs"></div>

    <!-- 修正单选按钮id，保证唯一性 -->
    <input type="radio" id="radio-one" name="div-radio" value="div-one" onClick="changeOpacity(this.value)" checked/>
    <input type="radio" id="radio-two" name="div-radio" value="div-two" onClick="changeOpacity(this.value)"/>
    <input type="radio" id="radio-three" name="div-radio" value="div-three" onClick="changeOpacity(this.value)"/>
    <input type="radio" id="radio-four" name="div-radio" value="div-four" onClick="changeOpacity(this.value)"/>

    <script>
      function changeOpacity(divId) {
        // 先隐藏所有div
        document.querySelectorAll(".my-divs").forEach(e => {
          e.style.opacity = 0;
        });
        // 再显示目标div
        document.getElementById(divId).style.opacity = 1;
      }

      // 页面加载时触发，让默认选中的单选按钮对应div显示
      window.onload = function() {
        const checkedRadio = document.querySelector('input[name="div-radio"]:checked');
        if (checkedRadio) {
          changeOpacity(checkedRadio.value);
        }
      }
    </script>
  </body>
</html>

关键修改说明 #

1. 修复单选按钮id：将每个radio的id改为radio-one、radio-two等，确保DOM元素id唯一。
2. 简化显示逻辑：先遍历所有.my-divs设置透明度为0，再单独设置目标div为1，这种写法比:not选择器更直观，也避免了字符串拼接的易错点；若坚持使用:not，可写成document.querySelectorAll(.my-divs:not(#${divId}))（注意用反引号包裹模板字符串）。
3. 优化初始体验：给div添加基础样式便于观察效果，设置初始透明度为0，同时给第一个radio加上checked属性，页面加载时自动显示对应div。

内容的提问来源于stack exchange，提问作者Robith Nuriel Haq