不确定的复选框

复选框输入只能有两种状态：选中或未选中。它们可以具有任何值，但它们要么提交该值（选中），要么不提交（未选中）以及表单提交。默认状态为未选中。您可以像这样在 HTML 中控制它

<!-- Default to unchecked -->
<input type="checkbox">

<!-- Default to checked, XHTML -->
<input type="checkbox" checked="checked" />

<!-- Default to checked, HTML5 -->
<input type="checkbox" checked>

从视觉上看，复选框实际上可以处于三种状态：选中、未选中或不确定。它们看起来像这样

以下是一些关于不确定复选框的注意事项

您无法通过 HTML 使复选框处于不确定状态。 没有不确定属性。但它是复选框的一个属性，您可以通过 JavaScript 更改它。

var checkbox = document.getElementById("some-checkbox");
checkbox.indeterminate = true;

或 jQuery 样式

$("#some-checkbox").prop("indeterminate", true); // prop is jQuery 1.6+

不确定状态仅为视觉状态。 复选框作为状态仍然处于选中或未选中状态。这意味着视觉上的不确定状态掩盖了复选框的真实值，因此在您的 UI 中最好有意义！

与复选框本身一样，不确定状态在不同的浏览器中看起来也不同。 这是 Mac 上的 Opera 11.50

用例

我写这篇文章的原因是，我刚刚遇到了这种情况：嵌套复选框。每个复选框可能都有子复选框。如果所有这些子复选框都被选中，则它可能被选中。如果没有选中，则未选中。如果某些复选框被选中，则它处于不确定状态（在本例中象征性地表示“部分”选中）。

以下是在 jQuery 中的示例

查看 CodePen 上 Chris Coyier (@chriscoyier) 编写的 不确定复选框。

以下是 TheNotary 提供的 另一个 jQuery 版本。

以下是由 Jakob Eriksen 提供的纯 JavaScript 版本

查看 CodePen 上 jakob-e (@jakob-e) 编写的
不确定复选框（原生 JS）
在 CodePen 上。

以及来自 Alvaro Montoro、Bramus、Gridbuilder、Lewin Probst 和 Jason Wilson 的一些替代方法。

使用 Stephen Margheim 的 StimulusJS

查看 CodePen 上 Stephen Margheim (@smargh) 编写的
复选框族
在 CodePen 上。

在状态之间轮换

Jon Stuebe 正在尝试通过点击在未选中、不确定和选中状态之间轮换的想法。以下是一些 jQuery 代码来实现此功能

var $check = $("input[type=checkbox]"), el;
$check
   .data('checked',0)
   .click(function(e) {
       
        el = $(this);
                
        switch(el.data('checked')) {
            
            // unchecked, going indeterminate
            case 0:
                el.data('checked',1);
                el.prop('indeterminate',true);
                break;
            
            // indeterminate, going checked
            case 1:
                el.data('checked',2);
                el.prop('indeterminate',false);
                el.prop('checked',true);                
                break;
            
            // checked, going unchecked
            default:  
                el.data('checked',0);
                el.prop('indeterminate',false);
                el.prop('checked',false);
                
        }
        
    });

查看 CodePen 上 Chris Coyier (@chriscoyier) 编写的 在不确定的复选框之间轮换。

读者 Casual Trash 为我发送了一个无库且更简洁的版本，用于遍历所有三种视觉状态，该版本利用了复选框输入可以具有的readonly属性。

<!-- Inline click handler, just for demo -->
<input type="checkbox" id="cb1" onclick="ts(this)">

function ts(cb) {
  if (cb.readOnly) cb.checked=cb.readOnly=false;
  else if (!cb.checked) cb.readOnly=cb.indeterminate=true;
}

查看 CodePen 上 Chris Coyier (@chriscoyier) 编写的 在不确定的复选框之间轮换。