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 ...
随机推荐
- sqlserver查询效率
很多人不知道SQL语句在SQL SERVER中是如何执行的,他们担心自己所写的SQL语句会被SQL SERVER误解.比如: select * from table1 where name='zhan ...
- 关于kali2.0 rolling无法连接数据的解决办法
在使用kali2.0时,经常遇到metasploit无法连接数据库的问题,经过在网上寻找资料,很多都是对kali2.0的,有些路径都是不同的了,所以未能解决, 最后在自己的摸索下,找到了如下方法: 其 ...
- .NET LINQ 生成操作
生成操作 生成是指创建新的值序列. 方法 方法名 说明 C# 查询表达式语法 Visual Basic 查询表达式语法 更多信息 DefaultIfEmpty 将空集合替换为具有默认值的单一 ...
- artdialog
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
- 用Myeclipse,包名上有小红叉(表示错误),但是包中的类都是没有错误的+struts2继承ActionSupport时package前面出错
使用Eclipse 进行项目开发,在实现类中的方法前面如果添加@Override就提示“Multiple markers at this line”的错误,问题描述如下 应该是JDK版本的问题, 右击 ...
- 图片大小以及dp和px关系一览表,logo尺寸
图片大小以及dp和px关系一览表 说明:根据上表,我们应该很容易算出一张图片在不同手机上的宽和高是多少. 结论 从上表可以得出如下结论 1. 图片放在drawable中,等同于放在drawable-m ...
- nginx,apache,tomcat配置https的阿里提供的文档
安装证书 ( 1 ) 打开 Nginx 安装目录下 conf 目录中的 nginx.conf 文件,找到 # HTTPS server # #server { # listen 443; # serv ...
- 【Java EE 学习 30】【闪回】【导入导出】【管理用户安全】【分布式数据库】【数据字典】【方案】
一.闪回 1.可能的误操作 (1)错误的删除了记录 (2)错误的删除了表 (3)查询历史记录 (4)撤销已经提交了的事务. 2.对应着以上四种类型的误操作,有四种闪回类型 (1)闪回表:将表回退到过去 ...
- WinForm/MIS项目开发之中按钮级权限实践
一.前言 AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速开发应用平台.用于帮助中小型软件企业建立一条适合市 ...
- Inno Setup 版本 5.5.3+ 简体中文语言包
; *** Inno Setup 版本 + 简体中文消息 *** [LangOptions] LanguageName=<7B80><4F53><> Languag ...