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/，水平有限，如果翻译不当的地方欢迎园友批评指正！

【翻译】checkbox的第三种状态的更多相关文章

  1. checkbox的第三种状态--不确定状态

    视觉上,checkbox有三种状态:checked.unchecked.indeterminate(不确定的).看起来就像这样子:

  2. 让DuiLib CheckBox支持全选、全不选、非全选三种状态

    原文 https://blog.csdn.net/EveyX/article/details/38433783 DuiLib官方库中的Checkbox只有Checked和Uncheck两种状态,但我们 ...

  3. WPF中CheckBox三种状态打勾打叉和滑动效果

    本文分为两个demo, 第一个demo实现checkBox的打叉或打勾的效果: 第二个demo部分实现checkBox的滑动效果. Demo1: wpf的CheckBox支持三种状态,但是美中不足的是 ...

  4. Hibernate三种状态的转换

    hibernate的状态 hibernate的各种保存方式的区(save,persist,update,saveOrUpdte,merge,flush,lock)及 对象的三种状态 hibernate ...

  5. Hibernate三种状态的区分，以及save,update,saveOrUpdate,merge等的使用 引自http://www.blogjava.net/TiGERTiAN/archive/2008/10/25/236519.html

    Hibernate的对象有3种状态,分别为:瞬时态(Transient). 持久态(Persistent).脱管态(Detached).处于持久态的对象也称为PO(Persistence Object ...

  6. Hibernate 的三种状态详解

    hibernate的对象有3种状态,分别为:瞬时态(Transient).持久态(Persistent).脱管态(Detached). 处于持久态的对象也称为PO(Persistence Object ...

  7. hibernate映射对象三种状态的分析

    一,首先hibernate中对象的状态有 三种:瞬态.游离态和持久态,三种状态转化的方法都是通过session来调用,瞬态到持久态的方法有save().saveOrUpdate(). get().lo ...

  8. Hibernate三种状态的区分，以及save,update,saveOrUpdate,merge等的使用

    Hibernate的对象有3种状态,分别为:瞬时态(Transient). 持久态(Persistent).脱管态(Detached).处于持久态的对象也称为PO(Persistence Object ...

  9. C#中??和？分别是什么意思？ 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中，对象相等和对象一致分别指的是什么？

    C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...

随机推荐

  1. 洛谷P3227 切糕

    最小割模板. 题意:你要在一个三维点阵的每个竖条中删去一个点,使得删去的点权和最小. 且相邻(四联通)的两竖条之间删的点的z坐标之差的绝对值不超过D. 解: 首先把这些都串起来,点边转化,就变成最小割 ...

  2. Hadoop基础-MapReduce的数据倾斜解决方案

    Hadoop基础-MapReduce的数据倾斜解决方案 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.数据倾斜简介 1>.什么是数据倾斜 答:大量数据涌入到某一节点,导致 ...

  3. 安装R和Rstudio

    安装R和Rstudio 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.  一.安装R编程语言 1.登录下载网站 https://cran.r-project.org/ 2.点击下载链 ...

  4. 小贾漫谈——Java反射

    一.Class的API 二.测试使用的JavaBean class Admin{ //字段 public String userName; public String pwd; private int ...

  5. mybatis入门基础----高级映射(一对一，一对多，多对多)

    阅读目录 一:订单商品数据模型 二.一对一查询 三.一对多查询 四.多对多查询 回到顶部 一:订单商品数据模型 1.数据库执行脚本 创建数据库表代码: CREATE TABLE items ( id ...

  6. Myeclipse 工具优化 [内存一直增加, jsp,javascript 编辑很卡]

    首先看这篇随笔 地址: Myeclipse/STS 首次在本地部署配置一个Spring MVC 项目 (十二) [http://www.cnblogs.com/editor/p/3915239.htm ...

  7. HDU 4506 小明系列故事——师兄帮帮忙（二分快速幂）

    题意:就是输入一个数组,这个数组在不断滚动,而且每滚动一次后都要乘以一个数,用公式来说就是a[i] = a[i-1] * k;然后最后一位的滚动到第一位去. 解题报告:因为题目中的k要乘很多次,达到了 ...

  8. django+mysql安装和设置

    之前我们已经用sqlite建立了第一个web app.今天来学习如何在django中使用MySQL. 首先需要安装MySQL,到官网下载安装包:https://dev.mysql.com/downlo ...

  9. python之pip安装mysql-python失败

    前言 由于公司使用的python版本是python2,并且连接mysql的包是mysql-python,但是mysql-python 使用pip安装报错,需要C++环境等依赖,于是使用wheel直接安 ...

  10. （转载）mysql：“Access denied for user 'root'@'localhost'”

    原文地址:http://www.linuxidc.com/Linux/2007-05/4338.htm # /etc/init.d/mysql stop# mysqld_safe --user=mys ...