如何在打开Modal时根据字符串值选中对应Radio Button？

你的代码逻辑有点搞反啦——你现在是在给已经被选中的单选框赋值，但我们实际需要的是根据目标值去选中对应的单选按钮，而不是修改已选中项的value。下面给你两种靠谱的实现方式：

方法一：用jQuery的val()方法（简洁推荐） #

jQuery针对单选按钮组提供了很方便的操作：给val()方法传入一个包含目标值的数组，就能自动选中对应value的选项。

// 先确定要选中的目标值，这里可以给个默认值避免空值
const targetValue = event ? event.name : 'Working Day';

// 选中对应单选按钮
$('#event-modal input[name="event_type"]').val([targetValue]);

方法二：直接定位元素设置checked属性（直观易懂） #

如果你更倾向于明确操作DOM元素，可以直接找到对应value的单选框，把它的checked属性设为true：

const targetValue = event ? event.name : 'Working Day';

// 拼接选择器，找到对应value的单选框
$('#event-modal input[name="event_type"][value="' + targetValue + '"]').prop('checked', true);

// 用模板字符串更清晰（ES6+）
// $(`#event-modal input[name="event_type"][value="${targetValue}"]`).prop('checked', true);

关键注意事项 #

1. 确保value完全匹配：你的单选按钮的value属性必须和event.name的字符串完全一致（包括空格、大小写），比如：

   <!-- 正确的radio结构示例 -->
   <div id="event-modal">
     <input type="radio" name="event_type" value="Public Holiday"> Public Holiday
     <input type="radio" name="event_type" value="Working Day"> Working Day
     <input type="radio" name="event_type" value="Weekend"> Weekend
   </div>
   

2. DOM元素必须已加载：如果你的Modal是动态渲染的（比如从模板生成），一定要确保执行这段代码时，Modal里的单选按钮已经被添加到DOM中。比如用Bootstrap Modal的话，可以把代码放在shown.bs.modal事件回调里：

   $('#event-modal').on('shown.bs.modal', function() {
     const targetValue = event ? event.name : 'Working Day';
     $(this).find('input[name="event_type"]').val([targetValue]);
   });
   

3. 避免空值默认情况：如果event不存在时，建议给个默认选中项（比如Working Day），这样用户打开Modal时表单有默认选中状态，更符合常规交互体验。

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