JS单选按钮获取值异常：返回ON而非苹果品种值，求排查错误

错误原因 #

你生成的单选按钮没有设置value属性，HTML里的单选按钮如果未显式指定value，浏览器会默认将其值设为"on"，这就是你获取到"ON"的原因。

修复方案 #

在循环创建单选按钮的过程中，给每个按钮添加value属性，值设为对应的苹果品种名称。另外可以优化label的关联，让点击标签也能选中单选按钮，提升用户体验。

修正后的代码 #

let apples = ['Fuji','Gala','Braeburn'];
const basketDiv = document.getElementById('basket');

for (const apple of apples) {
  let radiobtn = document.createElement('input');
  radiobtn.setAttribute('type', 'radio');
  // 添加value属性，绑定苹果品种名称
  radiobtn.value = apple;
  
  let radiolabel = document.createElement('label');
  radiolabel.innerHTML = apple;
  // 绑定label和radio的id，点击标签即可选中对应单选按钮
  radiolabel.setAttribute('for', apple);
  
  radiobtn.name = 'apples';
  radiobtn.id = apple;
  
  basketDiv.append(radiobtn);
  basketDiv.append(radiolabel);
  radiobtn.addEventListener('change', message);
}

function message(e) {
  let getselected = document.querySelector('input[name="apples"]:checked'); 
  if(getselected != null) { 
    document.getElementById("show").innerHTML = `${getselected.value} is selected`; 
  } else { 
    document.getElementById("show").innerHTML = "*You have not selected any apple"; 
  }
}

额外说明 #

• 修正后的代码里，每个单选按钮的value被明确设置为对应的苹果品种，获取getselected.value时就能得到正确的品种名称。
• 给label添加for属性并绑定radio的id，是符合HTML规范的做法，能提升表单的可访问性和交互体验。

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