(仅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 相关文章推荐
使用prototype.js 的时候应该特别注意的几个问题.
Apr 12 Javascript
javascript window对象属性整理
Oct 24 Javascript
Javascript查询DBpedia小应用实例学习
Mar 07 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 Javascript
Bootstrap每天必学之导航
Nov 26 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
vue页面加载闪烁问题的解决方法
Mar 28 Javascript
详解vue中axios的封装
Jul 18 Javascript
vue.js+element-ui动态配置菜单的实例
Sep 07 Javascript
vue2过滤器模糊查询方法
Sep 16 Javascript
Paypal支付不完全指北
Jun 04 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
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
php计划任务之ignore_user_abort函数实现方法
2015/01/08 PHP
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
PHP文件操作简单介绍及函数汇总
2020/12/11 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
2013/10/17 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
基于jQuery实现点击弹出层实例代码
2016/01/01 Javascript
实例解析jQuery工具函数
2016/12/01 Javascript
jQuery实现立体式数字动态增加(animate方法)
2016/12/21 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
微信小程序 五星评分的实现实例
2017/08/04 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
es6基础学习之解构赋值
2018/12/10 Javascript
jQuery轮播图功能制作方法详解
2019/12/03 jQuery
微信小程序静默登录的实现代码
2020/01/08 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
Python可跨平台实现获取按键的方法
2015/03/05 Python
用Python生成器实现微线程编程的教程
2015/04/13 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
Python 如何提高元组的可读性
2019/08/26 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
Cotton On美国网站:澳洲时装连锁品牌
2016/10/25 全球购物
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
护士长竞聘演讲稿
2014/04/30 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
考生诚信考试承诺书(2016版)
2016/03/25 职场文书
导游词之苏州寒山寺
2019/12/05 职场文书
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL
html中两种获取标签内的值的方法
2022/06/16 jQuery