我们在使用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. System Error Codes

    很明显,以下的文字来自微软MSDN 链接http://msdn.microsoft.com/en-us/library/windows/desktop/ms681382(v=vs.85).aspx M ...

  2. Spring的jdbcTemplate查询执行原生sql

    在spring与hibernate整合时进行数据库检索,执行原生sql: public AppointmentEvaluateVo searchMyfeedbackDetail(String acco ...

  3. Python:Pycharm下无法导入安装好的第三方模块?

    Pycharm下无法导入安装好的第三方模块requests? 在cmd下使用pip安装好requests模块后,可以使用import requests,但在Pycharm IDE下无法导入,出现如下错 ...

  4. C# Mvc中文件下载

    public ActionResult DownloadFile(string id) { var fileinfo = CommonAnnexService.Get(id); if (fileinf ...

  5. OSG透明代码

    //关闭灯光 state->setMode(GL_LIGHTING,osg::StateAttribute::OFF|osg::StateAttribute::PROTECTED); //打开混 ...

  6. Linux常用命令学习8---(用户和用户组管理)

    1.用户和用户组     用户和用户组概念        用户:使用操作系统的人(Linux支持多个用户在同一时间登陆同一个操作系统)        用户组:具有相同权限的一组用户(Linux系统中可 ...

  7. C++中随机数和不重复的随机数

    随机数 int rand (); rand函数返回一个0-32767之间的一个伪随机整数,32767可以由宏RAND_MAX表示,该函数需要头文件<stdlib.h>. 常用的是如何生成一 ...

  8. Dubbo详细介绍与安装使用过程

    今天看到一篇不错的dubbo介绍教程,原文链接:http://blog.csdn.net/xlgen157387/article/details/51865289 1 Dubbo介绍 1.1 dubb ...

  9. MyBatis - MyBatis使用log4j2显示sql和结果集

    mybatis-config.xml <settings> <setting name="logImpl" value="LOG4J2" /& ...

  10. java调用mysql服务做备份与恢复

    首先添加mysql的bin到环境变量,这样可以简写部分命令,并且做到不依赖系统mysql的具体安装路径. 重启计算机可以让添加的环境变量在java代码中调用时生效.(cmd中生效但java中调用没有生 ...