前言
今天整理QQ邮箱时，无意发现 QQ邮箱的选与不选中又多出一个状态(图一)，我以为是通过模拟达成的效果，F12查看才发现，貌似是原生效果(图二)，关键就是这个
this.middleStatus = this.indeterminate;
图一 图二
百度了下这个middleStatus没什么发现，倒是indeterminate有些内容，原来好多人也在好奇QQ邮箱的这个效果，所以就来谈谈这个indeterminate状态！
一. checkbox 的几种状态及实现
很明显，上面已经知道checxbox除了不选unchecked 和 选checked 以外还多了一种不确定indeterminate的状态。
checkbox默认就是不选，通过在标签中加上 checked 关键字即可显示为可选 或者通过js控制，那么不确定的indeterminate的状态是否可以通过 在标签中设置属性来改变样式呢？
答案是否定的，在W3C上查了下其标签属性 并没有 发现indeterminate的踪影。再次百度，在一篇css-tricks.com上的文章才得出结论， 对于不确定的indeterminate状态只能通过js来控制，看下面代码：
<input type="checkbox" id="checkdemo_unchecked"/>checkdemo_unchecked <br/> <input type="checkbox" id="checkdemo_checked"/>checkdemo_checked<br/> <input type="checkbox" id="checkdemo_indeterminate"/>checkdemo_indeterminate<br/> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script> <script>
//设置true或false来这只选与不选 $("#checkdemo_checked").prop("checked",true);
//设置true或false来设置不确定状态和不选 $("#checkdemo_indeterminate").prop("indeterminate",true); </script>
只在chrome和Firefox上测试了效果，Firefox的效果倒是看起来更加舒服！
二. 兼容性如何
这个indeterminate的属性一来用的少，而且我也并没有发现什么特别好的工具来检测兼容性，除非不同浏览器来看效果，引用其他同学的话，这个属性的兼容性从IE4.0就开始支持了，
但我并未发现 这个结论的出处，暂且记着。
三. 使用场景及好处
这个属性应该主要用在多选框嵌套的时候，比如QQ邮箱以及下面的应用，
平时没有这个不确定的状态也没觉得什么不妥，用上之后倒是觉得更加舒服，最大的优点估计就是是系统看起来更加人性化，更加舒适，交互性也强些吧！
四. input 之checkbox 标签 checked属性设置不起作用
在低版本的jQuery中，特别是1.6左右的，使用attr()方法来改变checked，通过attr("checked") 获取属性值，显示出来的checkbox并不总是和其属性相对应，所见不是所得，这似乎是1.6版本的bug，那时候做课程设计的时候，为此纠结好久；下面是例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Checkbox Demo</title> </head> <body> <input type="checkbox" id="checkdemo_checked"/>全选<br/> <input type="checkbox" id="checkbox1"/>我根据全选或全不选来改变<br/> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.1/jquery.js"></script> <script> $("#checkdemo_checked").bind({ click:function (argument) { var status = $(this).attr("checked"); if(status){ $("#checkbox1").attr("checked","checked"); }else{ //错误的做法 $("#checkbox1").attr("checked",""); //正确的做法 //$("#checkbox1").removeAttr('checked'); } console.log($("#checkbox1").attr("checked")); } }); </script> </body> </html>
结果：
在1.6版本中，想要取消选中，只能通过去除属性的方式
//正确的做法
$("#checkbox1").removeAttr('checked');
在较新的jQuery版本中，attr()方法的这个问题已经不存在了，但是还是建议使用prop属性来取代attr设置checked属性。而且官方也建议使用prop方法来改变值为boolean的属性；
五. 总结
- checkbox 除了 选中，不选以外 还有indeterminate 状态，意味不确定
- 设置indeterminate属性只能通过 js来设置，不能通过在标签中加属性来完成
- 兼容IE4浏览器，但是在不同的浏览器上表现不一样
- 多用于 checkbox嵌套的场景下，使页面交互性更强，页面更舒适
- 建议使用jQuery prop方法设置 checkbox的checked属性
参考文档
https://css-tricks.com/indeterminate-checkboxes/
http://lemmychrist.blog.163.com/blog/static/98732963201391485225489/