单选框选中状态验证异常求助：DOM返回值超前于验证执行

这问题我太熟了！你遇到的核心问题是**onclick事件触发时机在浏览器更新单选框checked状态之前**，所以你的代码拿到的永远是点击前的旧状态，逻辑自然就拧巴了——明明想点击切换，结果总是和预期反着来。

为什么你的代码会失效？ #

举个实际流程例子：

1. 单选框初始未选中（checked=false）
2. 你点击它，onclick事件先触发，此时浏览器还没来得及更新状态，你的代码判断checked=false，就把它设为true
3. 紧接着浏览器执行默认行为，又把单选框设为true——看起来没问题，但当你再次点击想取消时：
   • 此时单选框是checked=true，点击后onclick先触发，代码判断checked=true，设为false
   • 但浏览器的默认行为又会把它打回true，结果永远取消不了选中状态

两种靠谱的修复方案 #

方案一：改用onchange事件（最推荐）

change事件是在单选框状态完全更新完成后才触发的，此时拿到的checked值是最新的，逻辑不会出错。

修改你的HTML，把onclick换成onchange：

<label class='container'>
  <p1 style='font-size: 14px'>Able to fit several products</p1> 
  <input type='radio' name='Delivery' id='Delivery' onchange='radio_check();'> 
  <span class=checkmark></span> 
</label>

然后更新JavaScript函数：

function radio_check() {
  var radio = document.getElementById("Delivery");
  // 直接反转当前最新的状态
  radio.checked = !radio.checked;
}

方案二：在onclick里阻止默认行为，手动控制状态

如果一定要用onclick，可以先禁用浏览器的默认选中行为，完全自己控制状态切换：

修改HTML，给函数传event参数：

<label class='container'>
  <p1 style='font-size: 14px'>Able to fit several products</p1> 
  <input type='radio' name='Delivery' id='Delivery' onclick='radio_check(event);'> 
  <span class=checkmark></span> 
</label>

然后更新JavaScript函数：

function radio_check(e) {
  var radio = document.getElementById("Delivery");
  // 阻止浏览器自动更新单选框状态的默认行为
  e.preventDefault();
  // 手动切换选中状态
  radio.checked = !radio.checked;
}

小提醒 #

注意你的单选框name是Delivery，如果页面上还有其他同name的单选框，这种可取消的逻辑会打破单选框“同组互斥”的默认特性——正常同name的单选框只能选一个，而你的这个可以取消选中，要是有其他同组选项，得考虑是否会影响整体功能哦~

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