我们在使用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. 提额 APP

    提额 APP 开始参与这个APP也是巧合,一个月之前,我还在忙于电信运营商的工作,上级就过来问我在之前公司有没有用过 html css js这些.在维库的时候,可是从前台到后台都是要全包的呀,因为项目 ...

  2. 定时刷新之setTimeout(只一次)和setInterval(间隔相同时间)的使用

    setTimeout和setInterval的使用 这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript.不过两者各有各的应用场景. 方 法 实际上,setTimeout和setIn ...

  3. showModalDialog打开页面有缓存,不走action

    当你设置的弹出网页固定时,ie很可能到临时文件区,下载上次产生的该页面,而没有重新加载,    对于动态加载的页面来说,这样往往产生误会,如没有及时更新数据,也就更不利于开发者测试.所以,你可以采用如 ...

  4. qt creator 源代码中含有中文编译报错

    Tools-Options-Text Editor-Behavior-File Encoding-Default encoding:UTF-8 Tools-Options-Text Editor-Be ...

  5. Keywords Search(hdu 2222)

    题意:给出n个单词,一篇文章,询问有几个单词在文章中出现过. /* AC自动机的裸题. 题目标号牛的一比. */ #include<cstdio> #include<cstring& ...

  6. Win32中TreeView控件的使用方法,类似于资源管理器中文件树形显示方式

    首先是头文件,内容如下: #include <tchar.h> #include "..\CommonFiles\CmnHdr.h" #include <Wind ...

  7. 【Java EE 学习 23】【log4j的使用】【ant的使用】【内省】

    一.ant下载地址:http://ant.apache.org/bindownload.cgi  二.log4j下载地址:http://logging.apache.org/log4j/2.x/dow ...

  8. 个人对Java中多态的一些简单理解

    什么是多态 面向对象的三大特性:封装.继承.多态.从一定角度来看,封装和继承几乎都是为多态而准备的.这是我们最后一个概念,也是最重要的知识点. 多态的定义:指允许不同类的对象对同一消息做出响应.即同一 ...

  9. Monitoring Processes with Supervisord

    If you're interested in more of this type of content, check out the Servers for Hackers eBook! As so ...

  10. Listener refused the connection with the following error 错误解决

    原文地址 :http://blog.csdn.net/zajin/article/details/17753351 做个备份: 查询数据库当前进程的连接数: select count(*) from ...