(仅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 相关文章推荐
JavaScript使用prototype定义对象类型(转)[
Dec 22 Javascript
DOM 脚本编程中的兄弟节点
Oct 31 Javascript
js 设置缓存及获取设置的缓存
May 08 Javascript
jquery序列化表单以及回调函数的使用示例
Jul 02 Javascript
js实现简单随机抽奖的方法
Jan 27 Javascript
不得不分享的JavaScript常用方法函数集(下)
Dec 25 Javascript
javascript 动态样式添加的简单实现
Oct 11 Javascript
jquery DataTable实现前后台动态分页
Jun 17 jQuery
微信小程序数字滚动插件使用详解
Feb 02 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 Javascript
express框架下使用session的方法
Jul 31 Javascript
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
弹出广告特效代码(一个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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
php中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
控制PHP的输出:缓存并压缩动态页面
2013/06/11 PHP
PHP+MYSQL实现用户的增删改查
2015/03/24 PHP
java解析json方法总结
2019/05/16 PHP
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
jQuery EasyUI Panel面板组件使用详解
2017/02/28 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
复制粘贴功能的Python程序
2008/04/04 Python
在Python中测试访问同一数据的竞争条件的方法
2015/04/23 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
Pytorch Tensor 输出为txt和mat格式方式
2020/01/03 Python
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
python中如何进行连乘计算
2020/05/28 Python
在django中实现choices字段获取对应字段值
2020/07/12 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
如何用python批量调整视频声音
2020/12/22 Python
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
25道Java面试题集合
2013/05/21 面试题
师德学习感言
2014/01/31 职场文书
给校长的建议书600字
2014/05/15 职场文书
办公室主任岗位承诺书
2014/05/29 职场文书
大学生求职信例文
2014/06/29 职场文书
商场父亲节活动方案
2014/08/27 职场文书
农村党建工作汇报材料
2014/10/27 职场文书
年会邀请函范文
2015/01/30 职场文书
自从在 IDEA 中用了热部署神器 JRebel 之后,开发效率提升了 10(真棒)
2021/06/26 Java/Android
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB