如何为jQuery的.click事件动态传值，实现表头点击选中对应单选框

核心问题 #

1. 闭包变量污染：循环中定义的变量在事件触发时会取到最后一次循环的值，导致只有部分表头的事件绑定生效
2. 目标元素错误：原代码试图将表头元素设为checked，但实际需要选中的是带有对应类名的单选框

修正后的代码 #

直接利用表头元素的id（与单选框类名一致），通过each循环为每个表头绑定点击事件，同时避免闭包问题：

$('.Routes').each(function() {
    // 获取当前表头的id，即单选框对应的类名
    const targetClass = this.id;
    // 为当前表头绑定点击事件
    $(this).on('click', function() {
        // 选中所有带有该类名的单选框
        $('.' + targetClass).prop('checked', true);
    });
});

解决原理 #

• 每次each循环会创建独立作用域，targetClass变量会保留当前迭代的表头ID，不会被后续循环覆盖
• 事件处理函数中明确选中目标单选框，而非错误操作表头元素

额外优化建议 #

如果后续表头ID与单选框类名可能不一致，可通过data-*属性明确关联：

修改HTML表头：

<th class="rotate"><div><span class="Routes" data-target-class="Purchased"> Purchased</span></div></th>

对应JS代码：

$('.Routes').each(function() {
    const targetClass = $(this).data('target-class');
    $(this).on('click', function() {
        $('.' + targetClass).prop('checked', true);
    });
});

这种方式无需依赖ID与类名的一致性，代码可读性和可维护性更强。

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