TS脚本中this关键字失效问题求助，附相关实现代码

看起来你的脚本主要有两个核心问题：一是同组单选按钮的选中样式没有互斥，导致视觉上可能出现多个“选中”状态；二是代码末尾的截断内容可能干扰了事件逻辑，让this的作用效果看起来异常。下面是修复后的完整脚本，以及关键问题的说明：

修复后的完整代码 #

window.customRadio = function(radioName) {
  // 选中同组所有单选按钮
  const radioButtons = $(`input[type=radio][name='${radioName}']`);
  
  // 初始化每个单选按钮的包裹容器与默认选中状态
  radioButtons.each(function() {
    // 统一替换name中的[]为下划线，生成合法的CSS类名
    const wrapperClass = `custom-radio-${radioName.replace(/[\[\]]/g, '_')}`;
    $(this).wrap(`<span class='${wrapperClass}'></span>`);
    
    // 页面加载时，给已选中的单选按钮父容器添加样式
    if ($(this).is(':checked')) {
      $(this).parent().addClass("selected");
    }
  });
  
  // 绑定点击事件，处理单选状态切换
  radioButtons.click(function() {
    // 先清空同组所有单选按钮父容器的选中样式（实现互斥）
    radioButtons.parent().removeClass("selected");
    // 给当前点击的单选按钮父容器添加选中样式
    $(this).parent().addClass("selected");
  });
  
  // 返回单选按钮组，支持链式调用
  return radioButtons;
};

关键修复点说明 #

• this指向的正确性：在each遍历和click回调里，this本来就正确指向当前操作的单选按钮元素，之前的异常感大概率是因为没有处理同组的互斥逻辑——点击新选项时旧选项的选中样式没移除，导致看起来this没生效。修复后每次点击都会先清空同组样式，再给当前元素添加，保证单选的视觉效果。
• 类名生成优化：用正则表达式/[\[\]]/g一次性替换所有[和]，比多次replace更简洁可靠，避免类名出现非法字符。
• 移除无效截断代码：你代码末尾的return $(radioButton).no...是不完整的，会干扰事件回调的正常执行，修复后单独返回单选按钮组，不影响事件逻辑。
• 变量语义化：把radioButton改成radioButtons，因为选中的是同组多个元素，语义更清晰，避免误解。

配套使用示例 #

假设你的HTML结构是这样的：

<input type="radio" name="gender[]" value="male" checked> 男
<input type="radio" name="gender[]" value="female"> 女

调用脚本只需要一行：

customRadio("gender[]");

再配合以下CSS就能实现自定义单选按钮的视觉效果：

/* 自定义单选按钮容器样式 */
.custom-radio-gender_ {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  margin-right: 8px;
}
/* 隐藏原生单选按钮 */
.custom-radio-gender_ input {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
/* 选中状态的填充样式 */
.custom-radio-gender_.selected::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #007bff;
}

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