谈谈checkbox的几种状态

时间：2022-11-27 14:16:39

前言

　　今天整理QQ邮箱时，无意发现 QQ邮箱的选与不选中又多出一个状态(图一)，我以为是通过模拟达成的效果，F12查看才发现，貌似是原生效果(图二)，关键就是这个

this.middleStatus = this.indeterminate;

 

　　谈谈checkbox的几种状态      谈谈checkbox的几种状态

　　　　　　图一　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　图二

百度了下这个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的效果倒是看起来更加舒服！

谈谈checkbox的几种状态  谈谈checkbox的几种状态

二. 兼容性如何

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

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

 

三. 使用场景及好处

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

　　　谈谈checkbox的几种状态

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

四. 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>

结果：

谈谈checkbox的几种状态

在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/

标签：

相关文章