如何默认选中首个单选框并显示对应内容（兼容jQuery/原生JS）

看起来你需要把现有的jQuery代码改成原生JS，同时解决第一个单选框默认选中但内容不自动显示的问题。我帮你整理了一套完整的实现方案：

第一步：HTML结构示例 #

先确保你的HTML里，第一个单选框可以默认标记为checked（也可以用JS设置，不过HTML原生设置更直观）：

<!-- 单选框组 -->
<label>
  <input type="radio" name="content-switch" data-id="content1" checked> 内容1
</label>
<label>
  <input type="radio" name="content-switch" data-id="content2"> 内容2
</label>
<label>
  <input type="radio" name="content-switch" data-id="content3"> 内容3
</label>

<!-- 对应内容区块 -->
<div id="content1" class="content-block">这是内容1的内容</div>
<div id="content2" class="content-block none">这是内容2的内容</div>
<div id="content3" class="content-block none">这是内容3的内容</div>

这里的.none类用来隐藏元素，CSS可以这么写：

.none {
  display: none;
}

第二步：原生JS实现逻辑 #

接下来用原生JS完成切换和默认显示的逻辑，完全不需要依赖jQuery：

// 获取所有目标单选框元素
const radioButtons = document.querySelectorAll('input[type="radio"][name="content-switch"]');
// 获取所有内容区块
const contentBlocks = document.querySelectorAll('.content-block');

// 定义统一的内容切换函数
function switchContent(targetId) {
  // 先隐藏所有内容区块
  contentBlocks.forEach(block => {
    block.classList.add('none');
  });
  // 再显示目标区块
  const targetBlock = document.getElementById(targetId);
  if (targetBlock) {
    targetBlock.classList.remove('none');
  }
}

// 给每个单选框绑定切换事件
radioButtons.forEach(radio => {
  radio.addEventListener('change', function() {
    const targetId = this.getAttribute('data-id');
    switchContent(targetId);
  });
});

// 页面加载完成后，自动触发选中单选框的内容显示
document.addEventListener('DOMContentLoaded', function() {
  const checkedRadio = document.querySelector('input[type="radio"][name="content-switch"]:checked');
  if (checkedRadio) {
    const targetId = checkedRadio.getAttribute('data-id');
    switchContent(targetId);
  }
});

关键细节说明 #

• 我们把内容切换逻辑封装成switchContent函数，避免重复代码，也方便后续维护
• 页面加载时主动检测已选中的单选框（这里就是第一个），调用切换函数显示对应内容
• 如果你的HTML里没给第一个单选框加checked属性，也可以在DOMContentLoaded里手动设置：

  const firstRadio = radioButtons[0];
  firstRadio.checked = true;
  switchContent(firstRadio.getAttribute('data-id'));
  

这样就能实现页面加载时第一个单选框默认选中，且对应内容自动显示，点击其他单选框时无缝切换内容的效果啦。

内容的提问来源于stack exchange，提问作者SNaRe