为何jQuery单选复选框代码被<th>包裹后失效？

• 选择器未匹配到目标元素：如果你的原代码用了类似$('tr > input[type="checkbox"]')这类限定直接子元素的选择器，把复选框放进<th>后，它不再是<tr>的直接子元素，选择器就抓不到这些复选框，事件逻辑自然不会触发。
• 兄弟元素遍历逻辑失效：大多数模拟单选的代码会在复选框勾选时，遍历同一父元素下的其他复选框取消勾选。比如原代码可能写了$(this).siblings('input[type="checkbox"]').prop('checked', false)——当复选框直接在<tr>里时，它们是兄弟关系，能互相找到；但放到<th>后，每个复选框的父元素变成了<th>，复选框之间不再是兄弟，siblings()根本找不到其他复选框，逻辑直接失效。
• 事件委托的目标层级判断错误：如果用了事件委托（比如$('table').on('change', 'tr input', ...)），虽然选择器能匹配到<th>里的复选框，但如果代码里是基于父元素的兄弟关系处理，同样会因为结构变化找不到目标。

举个典型的错误代码例子：

$('tr input[type="checkbox"]').on('change', function(){
  if($(this).is(':checked')){
    // 仅能找到同一父元素下的兄弟复选框
    $(this).siblings('input[type="checkbox"]').prop('checked', false);
  }
});

改成基于共同祖先查找就能解决：

$('table input[type="checkbox"]').on('change', function(){
  if($(this).is(':checked')){
    // 找到当前复选框所在行的所有同类型复选框，排除自身后取消勾选
    $(this).closest('tr').find('input[type="checkbox"]').not(this).prop('checked', false);
  }
});

内容的提问来源于stack exchange，提问作者Bob G.