如何使用JavaScript默认选中第三个radio单选按钮并获取选中值

现有代码问题修正说明 #

• 同一组单选按钮必须设置相同的name属性才能实现互斥选中效果，你当前代码中每个单选按钮的name都不相同，属于独立选项，无法形成单选组
• HTML规范要求页面内元素id属性必须唯一，你现有代码重复使用了相同id，会导致DOM选择逻辑异常

完整可运行代码 #

<div id="radio-button">
    <!-- 第一组单选按钮，统一name为colors1 -->
    <input type="radio" name="colors1" value="1" id="myRadio11">红色
    <input type="radio" name="colors1" value="2" id="myRadio12">黑色
    <input type="radio" name="colors1" value="3" id="myRadio13">蓝色
    <br>
    <!-- 第二组单选按钮，统一name为colors2 -->
    <input type="radio" name="colors2" value="1" id="myRadio21">红色
    <input type="radio" name="colors2" value="2" id="myRadio22">黑色
    <input type="radio" name="colors2" value="3" id="myRadio23">蓝色
</div>
<p>点击"试一下"按钮展示选中的单选按钮值</p>

<button onclick="getCheckedValue()">试一下</button>

<script>
// 页面加载完成后默认选中所有组value为3的单选按钮
window.onload = function() {
  // 筛选所有value为3的单选按钮
  const targetRadios = document.querySelectorAll('input[type="radio"][value="3"]');
  targetRadios.forEach(item => {
    item.checked = true;
  })
}

// 点击按钮获取所有选中值
function getCheckedValue() {
  const checkedList = document.querySelectorAll('input[type="radio"]:checked');
  checkedList.forEach((item, idx) => {
    // 控制台打印选中值，可根据需求替换为弹窗、页面插入等展示方式
    console.log(`第${idx+1}组单选按钮选中值：${item.value}`);
  })
}
</script>

功能说明 #

• 页面加载完成后，两组单选按钮都会默认选中value为3的蓝色选项，符合默认选中第三个单选的需求
• 点击按钮后会在控制台输出所有单选组的选中值，也可以根据业务需求调整输出逻辑

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