checkbox的三种状态处理

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（不确定的）。看起来就像这样子：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAIAAABL1vtsAAAA80lEQVQ4je3TzU/CMBjHcf7/g/wnmiiJIigBFY2wCNrCpB2leyl9zZblGVc9GDhwkC67Gb/5Xfs5PW19Na71T/xGnLXbPjtBwKm8iPOr7tEuOred7l3vfliDmLzhw2YfIQ4pidjw4ak2EcwX73gVknXEeJyk4+eXGkQwX87QJ1oSEjEeJ5kQUsppEPgSl9d9HNIVZRueSCmttc455xzCC1/ipjeIGE+zTGud53m5j0ZrX6I/GCVpppRyzpVlCQBVVQEAj2NfYvQ4/nlfFAUA7PYJIXyJ18kUIUwI3XAutlttjLHWGKuU9iWaXmfTP1K3P0N8AxNtPnBtvXFFAAAAAElFTkSuQmCC" alt="" />aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAVCAIAAADTi7lxAAABR0lEQVQ4je3TzUsCQRgGcP+4wszugZgfUAQdggiyW7cuRYaYm4c9RIlQYEGH0gqLKFw/WBeapXRddam11V0pnRlmutRhLx46OOKhQw/P+QcvPK/je0xx/EOjQzvh8DAdCoK/hRBCKcUYQwgZoNR5erBCscwnb0ObJ0r9FSHEBhVEYLdYlq3u5+wSP+GJpLNljPEoUEmSG5p+eilOeiILoUSr9c58Gnip1bU38Kz0+tC3cuD0Rq/v5aqisEEPQkkQa4epnNXtZu6AyxebX0sQQgCQ2SC10VzeOHZ6o+KTtriedAe4iyzAGCs1lQ0qiZLaNKbm9lz+mDvABVePCP2CEDY1jQ16zOXb5sdW/Graz80E98/Skj0iXdfZoHyhWKlU65qxHc/s8je9PjYtq9MxDaPNBtlBCFFKCSEIocGVDwuN59dY8/egH9PmXvnWgOrSAAAAAElFTkSuQmCC" alt="" />aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAIAAAAf7rriAAABPklEQVQ4jWN49vY92YhhEGju6+8nBuHU/IUQIKBZM6lXK6lPK6lPK6lXM7FHI6FLI65dPbpFLbKBKM31J55UH35Yuu9u3vabGesvJyw/Ezn3iEpYDRGaE7urDz3QX3FVf9llvSUXdOef1p55NGDSbuWgMsKaNeI7S3bf0ltyUXfROZ25J7WnH9KcuNu9baOCTx5hzeqxrbmbr+jMO6k984jW5H0avdtVW9fZVS6Tc0slrFktqjFt5WmtKfs1+naotW9QqV+uVD7fJHuWtEMMYc0qodWxcw+pd25WaVylVLFAPn+aXGa/TkK/pHUoYc3KgaWhk3b4tK1zqVpinTfTKHWyTny/amQPUZoV/QrlPbNkXRKl7CIlrUMlrUMlrUIlrUKJ0kx+CiM/bVOUq0hCT9+8e/rmHcman755B2cAACi1cO9azQ9oAAAAAElFTkSuQmCC" alt="" />

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

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

或者通过jQuery来设置

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

$("#reyo-checkbox").attr("indeterminate", true);
$("#reyo-checkbox").prop("indeterminate", true);
两种都可以，不过新版jquery推荐第二种，两个在其他方面都差不多，我发现的唯一不同就是在checkbox上的时候，需要用prop，不然IE浏览器会不兼容

checkbox的indeterminate状态仅仅是视觉上的，它的值仍然只有checked或unchecked，这意味着indeterminate状态的checkbox的真正价值只是在用户界面上看起来更友好！来看一下我们实际应用的效果：