【翻译】checkbox的第三种状态

checkbox只有两种值：选中（checked）或未选中（unchecked）。它可以有任何值，但是表单提交时checkbox的值只能是checked或unchecked。它的默认值是unchecked，你可以在HTML中这样控制它：

?

视觉上，checkbox有三种状态：checked、unchecked、indeterminate（不确定的）。看起来就像这样子：

对于indeterminate状态的checkbox需要注意的是：你无法在HTML中设置checkbox的状态为indeterminate。因为HTML中没有indeterminate这个属性，你可以通过Javascript脚本来设置它

?

或者通过jQuery来设置

?

checkbox的indeterminate状态仅仅是视觉上的，它的值仍然只有checked或unchecked，这意味着indeterminate状态的checkbox的真正价值只是在用户界面上看起来更友好！

indeterminate状态的checkbox在不同浏览器里外观不同，下图是它在Mac下Opera 11.50的外观：

案例

我写这篇文章的主要原因是我有一个有用的案例：在嵌套的checkbox中，每一个checkbox都可能有很多个子checkbox，如果所有子checkbox都选中了，它也应该选中；如果没有一个子checkbox选中，它也不选中；如果有一部分子checkbox选中，它应该是indeterminate状态（在这种情况下，象征着部分子元素选中）.

完整demo（原作者的demo有点问题，这里我做了个简化

?

<div id="page-wrap"&gt;    
   <h1>checkbox的第三种状态</h1>        
   <ul>
    <li>
        <input type="checkbox" name="tall" id="tall"&gt;
        <label <span style="color: #0000ff;"&gt;for</span>="tall"&gt;Tall Things</label>

        <ul>
             <li>
                 <input type="checkbox" name="tall-1" id="tall-1"&gt;
                 <label <span style="color: #0000ff;"&gt;for</span>="tall-1"&gt;Buildings</label>
             </li>
             <li>
                 <input type="checkbox" name="tall-2" id="tall-2"&gt;
                 <label <span style="color: #0000ff;"&gt;for</span>="tall-2"&gt;Giants</label>
             </li>
             <li>
                 <input type="checkbox" name="tall-3" id="tall-3"&gt;
                 <label <span style="color: #0000ff;"&gt;for</span>="tall-3"&gt;Two sandwiches</label>
             </li>
        </ul>
    </li>
    <li>
        <input type="checkbox" name="short" id="short"&gt;
        <label <span style="color: #0000ff;"&gt;for</span>="short"&gt;Short Things</label>

        <ul>
             <li>
                 <input type="checkbox" name="short-1" id="short-1"&gt;
                 <label <span style="color: #0000ff;"&gt;for</span>="short-1"&gt;Smurfs</label>
             </li>
             <li>
                 <input type="checkbox" name="short-2" id="short-2"&gt;
                 <label <span style="color: #0000ff;"&gt;for</span>="short-2"&gt;Mushrooms</label>
             </li>
             <li>
                 <input type="checkbox" name="short-3" id="short-3"&gt;
                 <label <span style="color: #0000ff;"&gt;for</span>="short-3"&gt;One Sandwich</label>
             </li>
        </ul>
    </li>
</ul>

</div>