Drupal暴露过滤器：选中单选按钮时选中包裹它的Label的DOM遍历问题

嘿，我完全懂你碰到的麻烦——当<label>把<input type="radio">包在里面的时候，原来靠相邻兄弟选择器+的方法就失效了，而且你之前写的jQuery代码还犯了选择器方向搞反的错误。下面给你两种可行的解决办法，优先推荐CSS方案，更简洁高效：

方法一：纯CSS（推荐） #

现在主流浏览器都支持:has()伪类了，它能直接选中包含指定子元素的父元素，完美适配你的HTML结构。只需要在样式表中添加这段代码：

.control-label:has(input[type=radio]:checked) {
  font-weight: bold;
}

这样只要radio被选中，它外层的.control-label就会自动应用加粗样式，不需要任何JS，页面加载和切换选项时都会自动生效。

方法二：jQuery方案 #

如果你的项目需要兼容一些老旧浏览器（不过现在这种情况很少了），可以用jQuery来实现。你之前的代码错误在于：input[type=radio]:checked .control-label是在选中的radio内部找.control-label元素，但实际上.control-label是radio的父元素，得用向上查找的方法：

// 页面加载完成后，先给已选中的radio对应的label设置样式
jQuery(document).ready(function() {
  // 重置所有label的样式
  jQuery(".control-label").css("font-weight", "normal");
  // 给选中的radio的父label设置加粗
  jQuery("input[type=radio]:checked").closest(".control-label").css("font-weight", "bold");

  // 监听radio的切换事件，实时更新样式
  jQuery("input[type=radio]").on("change", function() {
    jQuery(".control-label").css("font-weight", "normal");
    jQuery(this).closest(".control-label").css("font-weight", "bold");
  });
});

这里用.closest(".control-label")来向上查找最近的.control-label父元素，比.parent()更稳妥，万一HTML结构有额外嵌套也能正常工作。

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