如何将选中的单选按钮值显示到Size文本输入框中？

问题根源 #

1. 单选按钮<input>未设置value属性，导致JS无法获取对应选项的文本内容
2. 文本输入框的内容需通过.value属性修改，而非.innerHTML（innerHTML用于修改元素内部HTML结构，不适用于input类表单元素）
3. 原代码循环变量i未声明，存在全局变量污染风险

修正后的完整代码 #

1. 调整单选按钮HTML（添加value属性）

<div class="Choosesize">
      <details>
        <summary class="SelectionHeader"><span class="circleborder">3</span><span>Select your size</span></summary>
        <div class="SizeOptions">
          <input class="SizeInput" type="radio" name="size" id="3XL" value="Triple XL" onclick="displaySize()">
          <label class="SizeLabel" for="3XL" onclick="displaySize()">   Triple XL   </label>
          <input class="SizeInput" type="radio" name="size" id="2XL" value="Double XL" onclick="displaySize()">
          <label class="SizeLabel" for="2XL" onclick="displaySize()">   Double XL   </label>
          <input class="SizeInput" type="radio" name="size" id="XL" value="Extra Large" onclick="displaySize()">
          <label class="SizeLabel" for="XL" onclick="displaySize()">    Extra Large </label>
          <input class="SizeInput" type="radio" name="size" id="L" value="Large" onclick="displaySize()">
          <label class="SizeLabel" for="L" onclick="displaySize()"> Large   </label>
          <input class="SizeInput" type="radio" name="size" id="M" value="Medium" onclick="displaySize()">
          <label class="SizeLabel"  for="M" onclick="displaySize()">    Medium  </label>
          <input class="SizeInput" type="radio" name="size" id="S" value="Small" onclick="displaySize()">
          <label class="SizeLabel"  for="S" onclick="displaySize()">    Small       </label>
          <input class="SizeInput" type="radio" name="size" id="XS" value="Extra Small" onclick="displaySize()">
          <label class="SizeLabel" for="XS" onclick="displaySize()">    Extra Small </label>
        </div>
      </details>
    </div>

2. 修正JavaScript代码（简洁版）

function displaySize() {
  // 直接获取选中的单选按钮
  const selectedSize = document.querySelector('input[name="size"]:checked');
  if (selectedSize) {
    // 修改输入框的value值，trim()去除多余空格
    document.getElementById("YourSizeId").value = selectedSize.value.trim();
  }
}

3. 输入框HTML保持不变

<div class="CustomOption"> <input type="text" name="size" disabled value="Your size" id="YourSizeId"> </div>

说明 #

• 给每个单选按钮添加value属性，值与对应标签文本一致，确保JS能获取到要显示的内容
• 使用querySelector直接定位选中的单选按钮，比遍历所有元素更高效
• 调用.trim()去除标签文本中的多余空格，让输入框显示更整洁

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