本文介绍使用 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 类选择器：
jQuery点击事件遮罩弹出层可移动特效代码
下载
"jQuery点击事件遮罩弹出层可移动特效代码下载。一款jquery弹出层插件制作注册表单点击按钮弹出层表单提交效果，可支持拖到的jQuery弹出层效果。标题、高度、宽度等可以自定义弹出层js插件。
$('.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」的工程化实践。
