我们在使用input标签,多选框时,通常会看到两种状态,即选中(checked)和被选中(unchecked)。

// 选中状态也可写成checked="checked"
checked:<input type="checkbox" checked>
// 未选中状态不写即可
unchecked:<input type="checkbox" unchecked>

但是对于checkbox还有一种模糊状态,这种状态在哪里会看到呢,如果你用过QQ邮箱的话,相信你会看到,但有可能会忽略这个细节,如QQ邮箱中效果:

那么这种效果是怎么实现的呢。indeterminate既为checkbox中的一个属性必然可以被js控制,所以可以用js来控制现有状态。

<input id="check" type="checkbox">
<script>
var Check = document.getElementById('check');
Check.indeterminate = true;
</script>

出现的效果同QQ邮箱中效果一样,以下为不同浏览器中indeterminate状态显示情况:

IE(10):

firefox:

chrome:

值得注意的是,虽然indeterminate贵为checkbox的属性,但在html中单独使用并不会出现效果。并且indeterminate只会对checkbox的样子发生改变,也就是说与真正的取值并无关系。

input checkbox属性-Indeterminate状态的更多相关文章

  1. css input checkbox和radio样式美化

    参考:https://segmentfault.com/a/1190000004553258 http://www.haorooms.com/post/css_mh_ck_radio 思路都一样的,先 ...

  2. 利用checkbox自带属性indeterminate构建含部分选中状态的树状结构

    本来上个月就像发的,但是一直忙啊忙的也没时间整理,所以拖到了现在. 好吧上面这句就是废话,我就是感概下.下面是正文. 前段时间在弄一个轻量级的web项目,要构建一个树状结构目录,同时希望能把部分选中的 ...

  3. checkbox属性checked="checked"但状态不是勾选状态的解决办法

    原因: jQuery API明确说明,1.6+的jQuery要用prop,不能用attr否则无效,尤其是checkBox的checked的属性的判断.

  4. jquery--获取input checkbox是否被选中以及渲染checkbox选中状态

    jquery获取checkbox是否被选中 html <div><input type="checkbox" id="is_delete" n ...

  5. jQuery判断复选框checkbox的选中状态

    通过jQuery设置复选框为选中状态 复选框 <input type="checkbox"/> 错误代码: $("input").attr(&quo ...

  6. jquery 获取 checkbox 的 checked 状态问题

    这个郁闷了,今天写这个功能的时候发现了问题,上网找了好多资料对照,更加纠结... 事实证明一切,自己测试了N遍,发现网上的说法和自己以前的理解都是错的,不知道大家有没发现. 下面来看看网上大多资料的说 ...

  7. HTML中强大的input标签属性

    用了许久的html,<input>这个标签是最常用的标签之一. <input type="">标签中type属性是必不可少的,以往我最常用的有 type=& ...

  8. Jquery获取checkbox属性checked为undefined

    说明:本文来自新浪博客,因为无法收藏,故直接copy过来备注,以后好查询 原网址:http://blog.sina.com.cn/s/blog_6810dfc20101jddq.html 使用jQue ...

  9. Ztree _ 横向显示子节点、点击文字勾选、去除指定元素input的勾选状态

    前些天项目需要树结构表现数据,需求ztree就能满足所以直接使用ztree只是踩了些小坑... 1.ztree子节点横向显示(下图): 效果说明:第三级子节点按需求横向显示其他竖向显示,每行最多显示5 ...

随机推荐

  1. Javascript 执行环境及作用域

    执行环境是javascript中最为重要的一个概念. 执行环境定义了变量或函数有权访问的其他数据,决定了他们各自的行为. 每个执行环境都有一个与之关联的变量对象(variable object),环境 ...

  2. java 注解 + 自定义注解的使用

    java中元注解有四个: @Retention @Target @Document @Inherited:  @Retention:注解的保留位置 @Retention(RetentionPolicy ...

  3. Day20160425

    技术要求: 1.git使用 pull.push.cheakout.master.clone(本地提交有优势) 2.Maven(依赖init.install.compile.package.clean. ...

  4. 简单Java算法程序实现!斐波那契数列函数~

    java编程基础--斐波那契数列 问题描述:一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法. 思路:可能出现的情况:(1) n=1 ,一种方法 ;(2)n=2 ...

  5. SQL 2012 Restore HeaderOnly

    --USE [master] GO /****** Object: StoredProcedure [dbo].[zsp_RestoreHeaderOnly] Script Date: 2014/1/ ...

  6. Java整型与字符串相互转换

    >>>>>>>>>>>>>>>>>>>> 1如何将字串 String 转换成整数 ...

  7. BestCoder 2nd Anniversary

    A题 Oracle http://bestcoder.hdu.edu.cn/contests/contest_chineseproblem.php?cid=703&pid=1001 大数相加: ...

  8. acm数学(待续)

    意图写出http://www.cnblogs.com/kuangbin/archive/2012/08/28/2661066.html这个东西的完善版. 1.置换,置换的运算 poj 2369 Per ...

  9. BZOJ 3157 &数学乱搞...

    挖一发坑...一碰到数学题头晕眼花...看着证明感觉我幼儿园还没毕业... http://www.cnblogs.com/zhuohan123/p/3726933.html 等我会完完整整地写一发la ...

  10. ZeroMQ接口函数之 :zmq_unbind - 停止连接外来的请求

    ZeroMQ 官方地址 :http://api.zeromq.org/4-2:zmq_unbind zmq_unbind(3) ØMQ Manual - ØMQ/4.1.0 Name zmq_unbi ...