(仅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 相关文章推荐
JS 文件传参及处理技巧分析
May 13 Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
Dec 09 Javascript
Js操作树节点自动折叠展开的几种方法
May 05 Javascript
JavaScript插件化开发教程 (一)
Jan 27 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
Oct 12 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
Oct 09 Javascript
JS中的JSON对象的定义和取值实现代码
May 09 Javascript
Webpack设置环境变量的一些误区详解
Dec 19 Javascript
js代码实现轮播图
May 04 Javascript
vue循环中点击选中再点击取消(单选)的实现
Sep 10 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&amp;java(一)
2006/10/09 PHP
php下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
php木马webshell扫描器代码
2012/01/25 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
提高网站性能之 如何对待JavaScript
2009/10/31 Javascript
基于jQuery的表格操作插件
2010/04/22 Javascript
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
jquery 追加tr和删除tr示例代码
2013/09/12 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
2016/11/18 Javascript
Javascript刷新页面的实例
2017/09/23 Javascript
详解@angular/cli 改变默认启动端口两种方式
2018/11/29 Javascript
详解VUE项目中安装和使用vant组件
2019/04/28 Javascript
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
Django中使用第三方登录的示例代码
2018/08/20 Python
python绘制多个曲线的折线图
2020/03/23 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
python数据库编程 Mysql实现通讯录
2020/03/27 Python
Python Socketserver实现FTP文件上传下载代码实例
2020/03/27 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
最好的意大利皮夹克:D’Arienzo
2018/12/04 全球购物
Java中的类包括什么内容?设计时要注意哪些方面
2012/05/23 面试题
电大毕业自我鉴定
2014/02/03 职场文书
创建省级文明单位实施方案
2014/02/27 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
现货白银电话营销话术
2015/05/29 职场文书
在人间读书笔记
2015/06/30 职场文书