jQuery聚焦文本框联动单选按钮功能异常问题咨询

听起来你遇到的是表单元素状态同步的典型小问题，我来帮你拆解原因和给出具体解决办法：

核心问题分析 #

你的问题主要出在两个关键环节：

• 单选按钮未实现互斥：如果同一组的单选按钮没有共享同一个name属性，浏览器不会自动处理它们的互斥逻辑，导致切换新单选时旧的勾选状态不会被移除。
• 联动逻辑不完整：你只写了「输入文本时勾选对应单选」的正向逻辑，但缺少「切换单选时同步文本框状态」以及「回到文本框时自动勾选对应单选」的反向联动。

具体解决方案 #

第一步：先修复单选按钮的互斥性 #

先检查你的HTML代码，必须给同一组的单选按钮设置相同的name属性，这是浏览器实现单选互斥的基础：

<!-- 正确的单选按钮组：共享同一个name属性 -->
<input type="radio" name="inputSource" id="radioCustom" value="custom">
<label for="radioCustom">自定义文本</label>

<input type="radio" name="inputSource" id="radioOptionA" value="optionA">
<label for="radioOptionA">预设选项A</label>

<input type="radio" name="inputSource" id="radioOptionB" value="optionB">
<label for="radioOptionB">预设选项B</label>

<!-- 关联的文本输入框 -->
<input type="text" id="customInput" placeholder="输入自定义内容">

设置完相同的name后，浏览器会自动保证同一组里只有一个单选被勾选，切换时自动取消旧的选中状态。

第二步：补全完整的状态联动逻辑 #

用JavaScript实现双向状态同步，覆盖你遇到的所有场景：

const customInput = document.getElementById('customInput');
const radioCustom = document.getElementById('radioCustom');
const allRadioButtons = document.querySelectorAll('input[name="inputSource"]');

// 1. 文本输入时，自动勾选「自定义文本」单选
customInput.addEventListener('input', () => {
  radioCustom.checked = true;
});

// 2. 切换单选按钮时，同步文本框状态（选非自定义选项时清空文本）
allRadioButtons.forEach(radio => {
  radio.addEventListener('change', () => {
    if (radio !== radioCustom) {
      customInput.value = '';
    }
  });
});

// 3. 聚焦文本框时，自动勾选对应单选（解决回到文本框时单选不切换的问题）
customInput.addEventListener('focus', () => {
  radioCustom.checked = true;
});

逻辑说明 #

• 输入文本时：只要用户在文本框输入内容，就自动关联到「自定义文本」单选，保证状态一致；
• 切换单选时：如果选了预设选项，自动清空文本框，避免内容残留导致状态混乱；
• 聚焦文本框时：当用户回到文本框准备修改内容，自动勾选对应单选，解决你提到的「返回文本框时单选不切换」的问题。

额外小提示 #

如果你的表单需要提交数据，可以在提交前加一次状态校验，比如确保当「自定义文本」单选被勾选时，文本框不为空，避免无效提交。

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