如何动态绑定点击事件并批量操作同名类的复选框-js教程-PHP中文网

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

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

在实际开发中，我们常遇到类似需求：页面上有多个带 .Routes 类的表头（如 Purchased、BST），点击任一表头时，需将表格中所有属于该类别（如 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 中的文本内容与目标 radio 按钮的 class 完全一致（含大小写），例如 Purchased 对应；
若表头文本含特殊字符（如 /, (, )），需额外清洗（如 className.replace(/[^a-zA-Z0-9_]/g, '')），但本例中纯英文+空格已足够安全；
避免使用 .text() 在事件处理器中获取内容——它会合并子节点文本，而 e.target.textContent 更精准指向被点击元素本身。

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