checkbox只有兩種值：選中（checked）或未選中（unchecked）。它可以有任何值，但是表單提交時checkbox的值只能是checked或unchecked。它的默認值是unchecked，你可以在HTML中這樣控制它：
<!-- Default to unchecked --> <input type="checkbox"> <!-- Default to checked, XHTML --> <input type="checkbox" checked="checked" /> <!-- Default to checked, HTML5 --> <input type="checkbox" checked>
視覺上，checkbox有三種狀態：checked、unchecked、indeterminate（不確定的）。看起來就像這樣子：
對於indeterminate狀態的checkbox需要注意的是：你無法在HTML中設置checkbox的狀態為indeterminate。因為HTML中沒有indeterminate這個屬性，你可以通過Javascript腳本來設置它
var checkbox = document.getElementById("some-checkbox");
checkbox.indeterminate = true;
或者通過jQuery來設置
$("#some-checkbox").prop("indeterminate", true); // prop is jQuery 1.6+
checkbox的indeterminate狀態僅僅是視覺上的，它的值仍然只有checked或unchecked，這意味着indeterminate狀態的checkbox的真正價值只是在用戶界面上看起來更友好！
indeterminate狀態的checkbox在不同瀏覽器里外觀不同，下圖是它在Mac下Opera 11.50的外觀：
案例
我寫這篇文章的主要原因是我有一個有用的案例：在嵌套的checkbox中，每一個checkbox都可能有很多個子checkbox，如果所有子checkbox都選中了，它也應該選中；如果沒有一個子checkbox選中，它也不選中；如果有一部分子checkbox選中，它應該是indeterminate狀態（在這種情況下，象征着部分子元素選中）.
完整demo（原作者的demo有點問題，這里我做了個簡化
<!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <meta content="checkbox的第三種狀態 by 王美建 from：http://www.cnblogs.com/wangmeijian/"> <title>checkbox的第三種狀態</title> <link rel='stylesheet' href='css/style.css'> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(function() { $('input[type="checkbox"]').click(function(e) { var obj = $(this); setState(obj); function setState(oInput){ var state = oInput.prop("checked"), This = oInput, allLen = This.closest("ul").children("li").length, checkedLen = This.closest("ul").children("li").children("input:checked").length; console.log( "state = "+state ) console.log( "siblings = "+allLen ) console.log( "checkedLen = "+checkedLen ) if( allLen === checkedLen && checkedLen > 0 ){ oInput.closest("ul").closest("li").children("input").prop({ checked: true, indeterminate: false }) }else if( allLen !== checkedLen && checkedLen > 0){ oInput.closest("ul").closest("li").children("input").prop({ checked: false, indeterminate: true }) }else if(checkedLen == 0){ oInput.closest("ul").closest("li").children("input").prop({ checked: false, indeterminate: false }) } } }); }); </script> </head> <body> <div id="page-wrap"> <h1>checkbox的第三種狀態</h1> <ul> <li> <input type="checkbox" name="tall" id="tall"> <label for="tall">Tall Things</label> <ul> <li> <input type="checkbox" name="tall-1" id="tall-1"> <label for="tall-1">Buildings</label> </li> <li> <input type="checkbox" name="tall-2" id="tall-2"> <label for="tall-2">Giants</label> </li> <li> <input type="checkbox" name="tall-3" id="tall-3"> <label for="tall-3">Two sandwiches</label> </li> </ul> </li> <li> <input type="checkbox" name="short" id="short"> <label for="short">Short Things</label> <ul> <li> <input type="checkbox" name="short-1" id="short-1"> <label for="short-1">Smurfs</label> </li> <li> <input type="checkbox" name="short-2" id="short-2"> <label for="short-2">Mushrooms</label> </li> <li> <input type="checkbox" name="short-3" id="short-3"> <label for="short-3">One Sandwich</label> </li> </ul> </li> </ul> </div> </body> </html>
本文翻由博客園王美建譯自：https://css-tricks.com/indeterminate-checkboxes/，水平有限，如果翻譯不當的地方歡迎園友批評指正！