(仅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 相关文章推荐
DHTML Slide Show script图片轮换
Mar 03 Javascript
百度 popup.js 完美修正版非常的不错 脚本之家推荐
Apr 17 Javascript
jquery $.each()使用探讨
Sep 23 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
优化javascript的执行效率一些方法总结
Dec 25 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 Javascript
浅析AngularJs HTTP响应拦截器
Dec 28 Javascript
js控制li的隐藏和显示实例代码
Oct 15 Javascript
详解Vue自定义过滤器的实现
Jan 10 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
vue获取dom元素注意事项
Dec 28 Javascript
angularjs数组判断是否含有某个元素的实例
Feb 27 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
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
JavaScript高级程序设计 学习笔记 js高级技巧
2011/09/20 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
js实现超级玛丽小游戏
2020/03/18 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
python生成日历实例解析
2014/08/21 Python
python 2.7.14安装图文教程
2018/04/08 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
django的ORM模型的实现原理
2019/03/04 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
python通过对字典的排序,对json字段进行排序的实例
2020/02/27 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
jupyter notebook读取/导出文件/图片实例
2020/04/16 Python
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
软件毕业生个人鉴定
2014/03/03 职场文书
党支部承诺书范文
2014/03/28 职场文书
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
档案保密承诺书
2014/06/03 职场文书
数学兴趣小组活动总结
2014/07/08 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
2014年统战工作总结
2014/12/09 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
个人总结格式范文
2015/03/09 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL