(仅IE下有效)关于checkbox 三态


Posted in Javascript onMay 12, 2007

From:http://www.cnblogs.com/birdshome/archive/2005/01/03/85679.html 
    我们在使用Windows XP的文件夹属性对话框时,会发现文件夹的Attributes分类里的Read-only和Hidden选项有时不是完全的checked或unchecked状态,而常常是一种虽然已被打勾但背景又是灰色的状态。其实这种不确定的CheckBox状态Web中也是可以表现的。  

    在Web页面中,我们可以使用<input id="chkb" type="CheckBox">来得到一个CheckBox控件。这个控件最常见的形式就是checked(被打上一个勾)或unchecked状态,我们可是使用鼠标点击来轻松的切换这两个状态,同时也可以使用脚本语言来改变它们的状态,比如使用JavaScript脚本: 
chkb.checked = true; 或 chkb.checked = false;
下图是CheckBox可以表现的三种状态:
   (仅IE下有效)关于checkbox 三态
第一种和第三种很常见,而且它们是可以使用HTML来设置的,就是说我们可以把CheckBox的初始状态通过一个叫checked的html元素的属性来确定。我们这里要说的Indeterminate状态虽然在IE4.0就开始支持了,可是却没有html元素属性来设置其值,而只能使用脚本来设置其Indeterminate状态。 

    比如使用JavaScript脚本(indeterminate默认是false): 

chkb.indeterminate = true; 或 chkb.indeterminate = false; 

    注意:CheckBox的indeterminate是一个独立的属性,和CheckBox的checked、status的取值无关,也就是说它只会影响CheckBox的外观显示,我们仍然可以正常的使用脚本读取checked和status的值。 
------------------------------------------------------------------------
From:http://www.itbody.com/doc/Html/WEB/105537297.html

<body> 
<h3>三态的checkbox(变化顺序:未选中->灰色选中->白色选中)</h3><br> 
<form name=test> 
根据onclick变化的checkbox:<br> 
 <input type=checkbox name=checkbox0 flag=0 onclick='gray(this)'>初始化为未选中的checkbox<br> 
 </td><td><input type=checkbox name=checkbox1 flag=1 onclick='gray(this)'>初始化为白色选中的checkbox<br> 
 </td><td><input type=checkbox name=checkbox2 flag=2 onclick='gray(this)'>初始化为灰色选中的checkbox<br> 
根据onpropertychange变化的checkbox:<br> 
 <input type=checkbox name=checkbox3 onpropertychange='gray2(this)'>初始化为未选中的checkbox 
</form> 
<script language=javascript> 
//用于onclick,需要一个自定义属性flag. 
function gray(c) 
{ 
 switch(c.flag) 
 { 
 //当flag为0时,为未选中状态 
 case '0':c.checked=true;c.indeterminate=true;c.flag='2';break; 
 //当flag未1时,为白色选中状态 
 case '2':c.checked=true;c.indeterminate=false;c.flag='1';break; 
 //当flag为2时,为灰色选中状态 
 case '1':c.checked=false;c.indeterminate=false;c.flag='0';break; 
 } 
} 
//用于onpropertychange 
function gray2(c) 
{ 
 c.indeterminate=c.checked; 
} 
//用于body的onload,根据checkbox的flag属性判断checkbox的状态 
function check() 
{ 
 for(var i = 0;i<document.test.elements.length;i++) 
 { 
 var ele = document.test.elements[i]; 
 if(ele.flag!=null) 
 { 
 if(ele.flag=='0') 
 { 
 ele.checked = false; 
 ele.indeterminate = false; 
 } 
 if(ele.flag=='1') 
 { 
 ele.checked = true; 
 ele.indeterminate = false; 
 } 
 if(ele.flag=='2') 
 { 
 ele.checked = true; 
 ele.indeterminate = true; 
 } 
 } 
 } 
} 
window.onload=check; 
</script>

Javascript 相关文章推荐
一个很简单的办法实现TD的加亮效果.
Jun 29 Javascript
jquery.validate使用攻略 第三部
Jul 01 Javascript
js获取本机的外网/广域网ip地址完整源码
Aug 12 Javascript
使用JavaScript实现ajax的实例代码
May 11 Javascript
微信小程序开发实战教程之手势解锁
Nov 18 Javascript
基于Bootstrap框架实现图片切换
Mar 10 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
浅谈js中的bind
Mar 18 Javascript
JavaScript键盘事件响应顺序详解
Sep 30 Javascript
mpvue实现微信小程序快递单号查询代码
Apr 03 Javascript
JavaScript中的各种宽高属性的实现
May 08 Javascript
快速解决element的autofocus失效问题
Sep 08 Javascript
弹出广告特效代码(一个IP只弹出一次)
May 11 #Javascript
模拟用户操作Input元素,不会触发相应事件
May 11 #Javascript
网上抓的一个特效
May 11 #Javascript
用javascript实现分割提取页面所需内容
May 09 #Javascript
javascript语句中的CDATA标签的意义
May 09 #Javascript
广告代码静态化js通用函数
May 09 #Javascript
用javascript实现自定义标签
May 08 #Javascript
You might like
微盾PHP脚本加密专家php解密算法
2020/09/13 PHP
php学习之运算符相关概念
2011/06/09 PHP
php 中英文语言转换类
2011/09/07 PHP
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
Smarty保留变量用法分析
2016/05/23 PHP
PHP多进程编程实例详解
2017/07/19 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
2015/08/23 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
[01:06]DOTA2小知识课堂 Ep.02 吹风竟可解梦境缠绕
2019/12/05 DOTA
用Python遍历C盘dll文件的方法
2015/05/06 Python
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
python logging日志模块的详解
2017/10/29 Python
Windows下的Jupyter Notebook 安装与自定义启动(图文详解)
2018/02/21 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
Python实现简单石头剪刀布游戏
2021/01/20 Python
python如何以表格形式打印输出的方法示例
2019/06/21 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
管理科学大学生求职信
2013/11/13 职场文书
更夫岗位责任制
2014/02/11 职场文书
报告会主持词
2014/04/02 职场文书
工程部文员岗位职责
2015/02/04 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书