jQuery点击事件仅生效一次 点击按钮预选中radio单选框只触发一次问题

问题原因 #

你当前代码使用attr()方法设置checked属性是失效的核心原因：attr()操作的是HTML标签的静态初始属性，页面渲染完成后，单选框的选中状态属于DOM元素的动态布尔属性，修改这类属性需要使用prop()方法才能实时生效。
简单来说，attr('checked', true)只会在第一次给标签添加checked属性时生效，后续手动切换了其他选项后，DOM的动态选中状态已经更新，再修改静态的attr属性不会触发状态同步。

修复后的代码 #

只需把所有attr替换为prop即可：

jQuery(document).ready(function(){
  jQuery(".select-one").on('click', function(){
    jQuery("input[type='radio'][id='choice_25_25_0']").prop("checked", true);
  });
   jQuery(".select-two").on('click', function(){
    jQuery("input[type='radio'][id='choice_25_25_1']").prop("checked", true);
  });
   jQuery(".select-three").on('click', function(){
    jQuery("input[type='radio'][id='choice_25_25_2']").prop("checked", true);
  });
});

可选优化方案 #

可以简化重复的绑定逻辑，避免写多个重复的事件监听：

1. 首先给三个按钮增加自定义属性存储对应单选框ID：

<button class="select-btn" data-target-id="choice_25_25_0">选择第一项</button>
<button class="select-btn" data-target-id="choice_25_25_1">选择第二项</button>
<button class="select-btn" data-target-id="choice_25_25_2">选择第三项</button>

2. JS代码简化为单次绑定即可：

jQuery(document).ready(function(){
  jQuery(".select-btn").on('click', function(){
    const targetRadioId = jQuery(this).data('target-id');
    jQuery(`input[type='radio'][id='${targetRadioId}']`).prop("checked", true);
  });
});

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