【翻译】checkbox的第三种状态

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

Box"

<span style="color: #008000;">
<span style="color: #0000ff;"><<span style="color: #800000;">input <span style="color: #ff0000;">type<span style="color: #0000ff;">="checkBox"<span style="color: #ff0000;"> checked<span style="color: #0000ff;">="checked" <span style="color: #0000ff;">/>

<span style="color: #008000;">
<span style="color: #0000ff;"><<span style="color: #800000;">input <span style="color: #ff0000;">type<span style="color: #0000ff;">="checkBox"<span style="color: #ff0000;"> checked<span style="color: #0000ff;">>

 

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

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

Box = document.getElementById("some-checkBox"); checkBox.indeterminate = true;

 

或者通过jQuery来设置

$("#some-checkBox").prop("indeterminate",);

 

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

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

案例

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

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

 

display: none;" onclick="cnblogs_code_hide('84a03e18-767c-4bd5-9b9a-a0c02c1fd81e',event)" src="https://www.jb51.cc/res/2019/03-18/21/405b18b4b6584ae338e0f6ecaf736533.gif" alt="">

<Meta content="checkBox的第三种状态 by 王美建 from：http://www.cnblogs.com/wangmeijian/">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js">

<div id="page-wrap"&gt;    
   <h1>check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>的第三种状态</h1>        
   <ul>
    <li>
        <input type="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" name="tall" id="tall"&gt;
        <label <span style="color: #0000ff;"&gt;for</span>="tall"&gt;Tall Things</label>

        <ul>
             <li>
                 <input type="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" name="tall-1" id="tall-1"&gt;
                 <label <span style="color: #0000ff;"&gt;for</span>="tall-1"&gt;Buildings</label>
             </li>
             <li>
                 <input type="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" name="tall-2" id="tall-2"&gt;
                 <label <span style="color: #0000ff;"&gt;for</span>="tall-2"&gt;Giants</label>
             </li>
             <li>
                 <input type="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" 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="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" name="short" id="short"&gt;
        <label <span style="color: #0000ff;"&gt;for</span>="short"&gt;Short Things</label>

        <ul>
             <li>
                 <input type="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" name="short-1" id="short-1"&gt;
                 <label <span style="color: #0000ff;"&gt;for</span>="short-1"&gt;Smurfs</label>
             </li>
             <li>
                 <input type="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" name="short-2" id="short-2"&gt;
                 <label <span style="color: #0000ff;"&gt;for</span>="short-2"&gt;Mushrooms</label>
             </li>
             <li>
                 <input type="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" 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>

 

本文翻由博客园译自：，水平有限，如果翻译不当的地方欢迎园友批评指正！

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。