如何基于父元素过滤HTML元素？筛选非bootstrap-multiselect的复选框

你的原选择器无效的原因是：CSS :not() 伪类无法直接通过父元素关系选择器（如 ul.multiselect-container>input）来排除元素——它只能针对当前元素自身的选择器规则，而不能基于父元素的层级关系做过滤。另外bootstrap-multiselect的复选框通常嵌套在ul.multiselect-container下的li中，并非直接作为ul的子元素，所以原选择器也覆盖不到这类情况。

以下是几种可行的实现方式：

方法1：使用jQuery的.not()方法（推荐） #

.not()方法比CSS的:not()更灵活，可以直接传入需要排除的完整选择器：

$(this).find("input[type='checkbox']").not("ul.multiselect-container input[type='checkbox']");

这段代码先选中当前元素下所有复选框，再移除掉ul.multiselect-container内部的所有复选框。

方法2：使用.filter()方法精确判断 #

如果需要更精准的层级检查（比如避免误排除其他嵌套结构），可以用.filter()遍历每个复选框，判断它是否在目标容器内：

$(this).find("input[type='checkbox']").filter(function() {
  // 检查当前复选框的祖先中是否存在ul.multiselect-container
  return !$(this).closest("ul.multiselect-container").length;
});

.closest()会向上查找最近的匹配祖先元素，如果找不到则返回空集合，length为0，取反后就会保留不在目标容器内的复选框。

方法3：调整CSS选择器逻辑（仅适用于简单结构） #

如果你的页面中，非multiselect的复选框不会出现在ul.multiselect-container的任何子层级里，也可以用嵌套的:not()来选择：

$(this).find(":not(ul.multiselect-container) input[type='checkbox']");

不过这种方式在复杂嵌套结构下可能出现漏选或误选，不如前两种方法可靠。

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