checkbox设置三种状态 qt_谈谈checkbox的几种状态

前言

今天整理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来控制，看下面代码：

checkdemo_unchecked

checkdemo_checked

checkdemo_indeterminate

$("#checkdemo_checked").prop("checked",true);

//设置true或false来设置不确定状态和不选

$("#checkdemo_indeterminate").prop("indeterminate",true);

只在chrome和Firefox上测试了效果，Firefox的效果倒是看起来更加舒服！

  

二. 兼容性如何

这个indeterminate的属性一来用的少，而且我也并没有发现什么特别好的工具来检测兼容性，除非不同浏览器来看效果，引用其他同学的话，这个属性的兼容性从IE4.0就开始支持了，

但我并未发现 这个结论的出处，暂且记着。

三. 使用场景及好处

这个属性应该主要用在多选框嵌套的时候，比如QQ邮箱以及下面的应用，

平时没有这个不确定的状态也没觉得什么不妥，用上之后倒是觉得更加舒服，最大的优点估计就是是系统看起来更加人性化，更加舒适，交互性也强些吧！

四. input 之checkbox 标签 checked属性设置不起作用

在低版本的jQuery中，特别是1.6左右的，使用attr()方法来改变checked，通过attr("checked") 获取属性值，显示出来的checkbox并不总是和其属性相对应，所见不是所得，这似乎是1.6版本的bug，那时候做课程设计的时候，为此纠结好久；下面是例子：

Checkbox Demo

全选

我根据全选或全不选来改变

click:function(argument) {varstatus=$(this).attr("checked");if(status){

$("#checkbox1").attr("checked","checked");

}else{//错误的做法

$("#checkbox1").attr("checked","");//正确的做法

//$("#checkbox1").removeAttr('checked');

}

console.log($("#checkbox1").attr("checked"));

}

});