(仅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 相关文章推荐
AJAX架构之Dojo篇
Apr 10 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 Javascript
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
node.js中的fs.readdirSync方法使用说明
Dec 17 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
ECMAScript6轮播图实践知识总结
Aug 17 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
Sep 12 Javascript
Angular排序实例详解
Jun 28 Javascript
详解Js中的模块化是如何实现的
Oct 18 Javascript
vue父组件向子组件动态传值的两种方法
Nov 11 Javascript
微信小程序实现人脸检测功能
May 25 Javascript
vue 解决computed修改data数据的问题
Nov 06 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
JAVA/JSP学习系列之二
2006/10/09 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
深入领悟JavaScript中的面向对象
2013/11/18 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
Node.js与PHP、Python的字符处理性能对比
2014/07/06 Javascript
js闭包实现按秒计数
2015/04/23 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
js中json处理总结之JSON.parse
2016/10/14 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
2017/03/08 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
bootstrap table插件动态加载表头
2019/07/19 Javascript
Vue前端项目部署IIS的实现
2020/01/06 Javascript
viewer.js实现图片预览功能
2020/06/24 Javascript
vue设置全局访问接口API地址操作
2020/08/14 Javascript
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
基于numpy.random.randn()与rand()的区别详解
2018/04/17 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
The North Face北面法国官网:美国著名户外品牌
2019/11/01 全球购物
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
校领导推荐信
2013/11/01 职场文书
cf搞笑广告词
2014/03/14 职场文书
盲山观后感
2015/06/11 职场文书
大学生自我鉴定怎么写
2019/05/07 职场文书
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers