input checkbox属性-Indeterminate状态
我们在使用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状态的更多相关文章
- css input checkbox和radio样式美化
参考:https://segmentfault.com/a/1190000004553258 http://www.haorooms.com/post/css_mh_ck_radio 思路都一样的,先 ...
- 利用checkbox自带属性indeterminate构建含部分选中状态的树状结构
本来上个月就像发的,但是一直忙啊忙的也没时间整理,所以拖到了现在. 好吧上面这句就是废话,我就是感概下.下面是正文. 前段时间在弄一个轻量级的web项目,要构建一个树状结构目录,同时希望能把部分选中的 ...
- checkbox属性checked="checked"但状态不是勾选状态的解决办法
原因: jQuery API明确说明,1.6+的jQuery要用prop,不能用attr否则无效,尤其是checkBox的checked的属性的判断.
- jquery--获取input checkbox是否被选中以及渲染checkbox选中状态
jquery获取checkbox是否被选中 html <div><input type="checkbox" id="is_delete" n ...
- jQuery判断复选框checkbox的选中状态
通过jQuery设置复选框为选中状态 复选框 <input type="checkbox"/> 错误代码: $("input").attr(&quo ...
- jquery 获取 checkbox 的 checked 状态问题
这个郁闷了,今天写这个功能的时候发现了问题,上网找了好多资料对照,更加纠结... 事实证明一切,自己测试了N遍,发现网上的说法和自己以前的理解都是错的,不知道大家有没发现. 下面来看看网上大多资料的说 ...
- HTML中强大的input标签属性
用了许久的html,<input>这个标签是最常用的标签之一. <input type="">标签中type属性是必不可少的,以往我最常用的有 type=& ...
- Jquery获取checkbox属性checked为undefined
说明:本文来自新浪博客,因为无法收藏,故直接copy过来备注,以后好查询 原网址:http://blog.sina.com.cn/s/blog_6810dfc20101jddq.html 使用jQue ...
- Ztree _ 横向显示子节点、点击文字勾选、去除指定元素input的勾选状态
前些天项目需要树结构表现数据,需求ztree就能满足所以直接使用ztree只是踩了些小坑... 1.ztree子节点横向显示(下图): 效果说明:第三级子节点按需求横向显示其他竖向显示,每行最多显示5 ...
随机推荐
- MySQL 慢查询日志分析及可视化结果
MySQL 慢查询日志分析及可视化结果 MySQL 慢查询日志分析 pt-query-digest分析慢查询日志 pt-query-digest --report slow.log 报告最近半个小时的 ...
- Spring+SpringMvc+Mybatis框架集成搭建教程一(项目创建)
一.框架搭建环境 Spring 4.2.6.RELEASE SpringMvc 4.2.6.RELEASE Mybatis 3.2.8 Maven 3.3.9 Jdk 1.7 Idea 15.04 二 ...
- 八皇后问题_Qt_界面程序实现
//核心代码如下 //Queen--放置皇后 #include "queue.h" queue::queue() { *; ; this->board = new bool[ ...
- 小议ARM寄存器
ARM微处理器一共有37个32位寄存器,其中包括31个通用寄存器和6个状态寄存器,但是这些寄存处不能同时访问.但是通用寄存器R14 - R0 ,程序计数器PC(即R15),程序状态寄存器都是可以任何时 ...
- C语言中的强符号与弱符号
转自:http://blog.csdn.net/astrotycoon/article/details/8008629 一.概述 在C语言中,函数和初始化的全局变量(包括显示初始化为0)是强符号,未初 ...
- php调试
转自:http://www.cnblogs.com/gidot/p/4307709.html
- oracle存储过程截取字符串
declare CURSOR l_c IS select classid from cjt_class; Begin FOR i IN l_c LOOP update cjt_class t set ...
- wpf,离线状态下部分功能不可用。
离线状态下,设置按钮的不可用.通过改变资源字典的值. App.xaml 文件下添加如下 xmlns:sys="clr-namespace:System;assembly=mscorlib&q ...
- SSH三大框架的JAR包下载地址
官网的英文网站读起来有点费劲,把下载地址直接放到这儿,以后免得到处找了 Struts 2 : http://struts.apache.org/download.cgi#struts216 sprin ...
- [Python学习] python 科学计算库NumPy—矩阵运算
NumPy库的核心是矩阵及其运算. 使用array()函数可以将python的array_like数据转变成数组形式,使用matrix()函数转变成矩阵形式. 基于习惯,在实际使用中较常用array而 ...