如何通过jQuery实现同class不同name的单选按钮互斥选择？

原代码的问题 #

• 事件绑定范围不全：你用$('.rClass').click()直接绑定事件，只能给执行代码时已经存在的DOM元素绑定事件，后续动态生成的按钮不会被绑定这个点击事件，自然触发不了互斥逻辑。
• 事件类型适配性差：用click事件不如change事件贴合单选按钮的交互逻辑，单选按钮的核心是状态变更，点击事件可能和浏览器默认选中行为产生冲突，导致逻辑失效。

修正后的代码 #

最优方案：事件委托绑定change事件 #

// 推荐替换成按钮的实际父容器选择器（比如#radio-group），比document更高效
$(document).on('change', '.rClass', function() {
    // 排除当前按钮，将其余同class的单选按钮设为未选中
    $('.rClass').not(this).prop('checked', false);
});

补充说明 #

• 事件委托能覆盖所有现有和后续动态生成的.rClass按钮，解决动态元素无法绑定事件的问题。
• 使用.not(this)可以避免冗余操作，不用先把所有按钮设为未选中再重新勾选当前按钮，直接处理其他按钮即可。
• 尽量用按钮的直接父容器代替document作为事件委托的载体，减少事件冒泡层级，提升性能。

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