我们在使用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. oracle中根据当前记录查询前一条和后一条记录

    select * from aa01_2014 where aaa001=(select c.p from (select aaa001,lag(aaa001,1,0)  over (order by ...

  2. iOS 类微信语音播放之切换听筒和扬声器的方法解决方案

    [[UIDevice currentDevice] setProximityMonitoringEnabled:NO];   //建议在播放之前设置yes,播放结束设置NO,这个功能是 //添加监听 ...

  3. ios 添加伪闪屏

    self.window.rootViewController.view.alpha = ; UIImageView *splashImageView = [[UIImageView alloc]ini ...

  4. c语言中遇到“警告: the `gets' function is dangerous and should not be used.”的解决办法

    写于2016年12月1日. 在用c的库函数gets(str)时,编译出现该提示.原因在于linux下gcc不支持gets命令,要换成fgets(arr,size,stdin).

  5. 线性回归、梯度下降(Linear Regression、Gradient Descent)

    转载请注明出自BYRans博客:http://www.cnblogs.com/BYRans/ 实例 首先举个例子,假设我们有一个二手房交易记录的数据集,已知房屋面积.卧室数量和房屋的交易价格,如下表: ...

  6. ASP.NET MVC中的错误处理

    ASP.NET MVC中的错误的错误处理跨越了两个主要领域:程序异常和路由异常的处理.前者是关于在控制器和视图中捕获错误的;而后者更多是有关重定向和HTTP错误的. 1.在WebConfig中把过滤器 ...

  7. CentOS7下Oracle的自动备份

    概述 Linux下Oracle自动备份就没有MSSQL那么简单,在Linux下Oracle的备份需要借助crontab 指令,crontab 能够自动执行系统定时任务,通过配置crontab 指向Or ...

  8. Ext3日记文件系统为什么文件系统还会损坏?

    问题提出      在我们产品使用的多种文件系统中,ext3文件系统问题的一致性问题比较突出(这里的文件系统一致性问题特指文件系统元数据的一致性,下同).比如下面2例ext3文件系统损坏案例:     ...

  9. About_PHP_数据类型&常用数组函数

    PHP数据类型总结: 1:Boolean 布尔类型 返回值就是true和false 特殊情况:(1)false (2)整型0的时候 (3)空字符串/字符串“0” (4)null 以上都会被返回fals ...

  10. UVa #11582 Colossal Fibonacci Numbers!

    巨大的斐波那契数 The i'th Fibonacci number f (i) is recursively defined in the following way: f (0) = 0 and  ...