如何动态绑定点击事件以实现批量操作同名类的复选框

本文介绍使用 jquery 动态为多个具有相同 css 类的表头元素统一绑定 click 事件，并根据点击的表头文本自动匹配并选中对应 class 的所有单选按钮，避免重复代码，提升可维护性。

本文介绍使用 jquery 动态为多个具有相同 css 类的表头元素统一绑定 click 事件，并根据点击的表头文本自动匹配并选中对应 class 的所有单选按钮，避免重复代码，提升可维护性。

在实际开发中，我们常遇到类似需求：页面上有多个带 .Routes 类的表头（如 <span class="Routes">Purchased</span>、<span class="Routes">BST</span>），点击任一表头时，需将表格中所有属于该类别（如 class="Purchased" 或 class="BST"）的单选按钮设为 checked。若为每个表头单独写事件监听器（如 $('#Purchased').on(...)），面对 17+ 个类别将导致冗余且难以维护。

推荐解法：委托式单事件监听 + 动态类名推导

无需遍历、无需预存数组、无需手动拼接 ID，直接为所有 .Routes 元素绑定一个事件处理器，并在触发时动态提取文本内容，转换为合法 CSS 类选择器：

$('.Routes').on('click', function(e) {  // 获取点击元素的可见文本，替换空格为下划线（适配类名规范，如 "Purchased" → "Purchased"，"In Progress" → "In_Progress"）  const className = e.target.textContent.trim().replace(/s+/g, '_');  // 使用动态生成的类名，批量设置对应 radio 按钮的 checked 属性  $(`.${className}`).prop('checked', true);});

✅ 优势说明：

• ✅ 简洁高效：仅一行核心逻辑，无循环嵌套、无闭包陷阱；
• ✅ 健壮可靠：使用 textContent 替代 innerText 更兼容（尤其处理隐藏/换行文本）；正则 /s+/g 可替换多个连续空格；
• ✅ 语义清晰：类名与表头文本严格对应，HTML 结构即配置，新增表头无需改 JS；
• ✅ 性能友好：利用事件委托思想，DOM 更新后新添加的 .Routes 元素仍可响应（若需支持动态插入，建议改用 $(document).on('click', '.Routes', ...)）。

⚠️ 注意事项：

• 确保 HTML 中 <span class="Routes"> 的文本内容与目标 radio 按钮的 class 完全一致（含大小写），例如 <span class="Routes">Purchased</span> 对应 <input class="get_value Purchased">；
• 若表头文本含特殊字符（如 /, (, )），需额外清洗（如 className.replace(/[^a-zA-Z0-9_]/g, '')），但本例中纯英文+空格已足够安全；
• 避免使用 .text() 在事件处理器中获取内容——它会合并子节点文本，而 e.target.textContent 更精准指向被点击元素本身。

通过这一模式，17 个路由表头只需 4 行核心代码即可全部覆盖，真正实现「写一次，用 everywhere」的工程化实践。