Label与jQuery点击事件逆序触发：实现radio先选中再执行业务逻辑

你遇到的时序错位是DOM事件执行机制决定的：

• 我们通过jQuery绑定在label上的click自定义逻辑，会在事件冒泡阶段就执行
• 而label关联单选框、更新单选框选中状态的动作，属于click事件的默认行为，会等当前事件的所有同步处理器全部执行完之后，才会真正运行
  这就导致你在自定义click逻辑里读到的单选框checked状态，还是点击之前的旧值，自然没法正确判断表单分支。

方案1（优先推荐）：直接监听单选框的change事件 #

这是最符合DOM设计逻辑的实现方式。
单选框的change事件，本身就是为“控件选中/值状态完成更新”这个场景设计的触发时机——不管状态变化来自用户直接点单选框，还是点关联的label元素，只要选中状态真的变了，change事件就会在状态更新完成后触发，完全不会存在时序错位的问题。

// 绑定同组单选框的状态变化监听
$('input[name="radio"]').on('change', function() {
  const selectedValue = $(this).val();
  if (selectedValue === 'option1') {
    // 展示表单第一步分支
  } else {
    // 展示表单第二步分支
  }
});

这种方式完全适配你“单选框隐藏、靠label做交互触发”的场景，不需要用户真的点到单选框本身，只要label的点击触发了单选框的选中更新，change事件就会正常触发。

方案2：必须绑在label上时，用setTimeout延后执行逻辑 #

如果因为业务限制，必须把业务逻辑绑定在label的click事件上，可以利用浏览器事件循环的队列规则，把自定义逻辑延后到当前事件的所有同步代码、原生默认行为全部执行完成后再运行。

$('label').click(function() {
  // 0ms延迟的回调会被放到宏任务队列末尾，排在原生默认行为之后执行
  setTimeout(() => {
    if ($('#radio1').prop('checked')) {
      // 展示表单第一步分支
    } else {
      // 展示表单第二步分支
    }
  }, 0);
});

注意：这里必须用setTimeout这种宏任务延迟，不能用Promise、async/await这种微任务延迟——微任务的执行时机早于DOM默认行为，还是会读到旧的单选框状态。

• 不要在label的click回调里手动调用e.preventDefault()之后再手动设置单选框的选中态，这种方式会重复实现原生逻辑，容易出现状态不一致的问题，徒增维护成本
• 不要依赖直接读取当前label的索引判断流程分支，一旦DOM结构调整，很容易出现逻辑判断错误

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