如何选择未选中的复选框，但不包括不确定状态的复选框

Question

我有一个复选框列表，包括已选中、未选中和不确定（第三种）状态。对于那些想知道的人，我正在使用jQuery为某些复选框设置不确定状态。最终，我希望使用jQuery查找并选择所有未选中但不是不确定状态的复选框。

这里是我的复选框：

<div id="list">
    <input id="item-1" type="checkbox">
    <input id="item-2" type="checkbox">
    <input id="item-3" type="checkbox"> 
    <!-- and so on -->
</div>

我可以通过以下方式获取已选中的内容：

var checkedItems = $("#list").find("input:checkbox:checked");

我可以使用以下代码获取所有未选中的内容：

var uncheckedItems = $("#list").find("input:checkbox:not(:checked)");

然而，uncheckedItems 也会返回其状态不确定的项目。

我也尝试了以下方法，但是收到了 unsupported pseudo: indeterminate(…) 的错误提示。

var uncheckedItems = $("#list").find("input:checkbox:not(:checked):not(:indeterminate)");

那么我如何只选择未选中的项目，而不选择不确定的项目呢？

提前感谢您。

- HuorCulnamo

---

在我看来，复选框的语义似乎是开或关，第三种状态既不被期望也不被真正支持。为什么不使用单选按钮，例如“是/否/不确定”或类似易于处理和理解的选项呢？ - J E Carter II

嗨@JECarterII，不幸的是，我们当前的UI不支持单选按钮。因此我们只能使用复选框。 - HuorCulnamo

我可以问一下它们为什么“不起作用”吗？是因为没有足够的空间，所以无法使用多个单选按钮吗？因为在外观上，只要样式相同，复选框和单选按钮之间没有区别。 - junkfoodjunkie

我已经更新了我的答案，添加了一个js fiddle和更精确的语义来适应你的使用情况。并且添加了jsfiddle链接。 - Victory

嗨@junkfoodjunkie，它不起作用是因为空格的影响，这也会影响外观。简而言之，每个复选框代表一个集合。如果所有项目都在该集合中，则显示勾选。如果不是所有项目都在其中，则显示不确定状态。如果没有任何项目在该集合中，则不勾选。 - HuorCulnamo

为什么不使用“红绿灯”系统呢？绿色：全部存在，黄色：部分存在，红色：未找到？可以只使用背景颜色，或者作为圆形图标，取代现在的复选框？我不知道 - 对于大多数用户来说，“不确定”是一个陌生的概念，因为复选框的标准功能要么是开启，要么是关闭。 - junkfoodjunkie

Answer 1

您可以在不定属性上使用筛选器。

$("[type=checkbox]:not(:checked)")
  .filter(function () { return !this.indeterminate; });

查看 jsfiddle

- Victory

Answer 2

虽然这是一个老问题，但我还是看到了它，因此想更新一下。与Victory建议的在筛选器下使用单独函数不同，可以通过简单地扩展选择器来处理它：

$("[type=checkbox]:not(:checked):not(:indeterminate)")

这里是Victory答案的修改后JSFiddle链接

- Dan Sherwin