(仅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 相关文章推荐
jQuery 幻灯片插件(带缩略图功能)
Jan 24 Javascript
五段实用的js高级技巧
Dec 20 Javascript
JQuery筛选器全系列介绍
Aug 27 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
Nov 28 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
Dec 11 Javascript
jquery ui dialog替代confirm实例分析
Jan 25 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
angular5 httpclient的示例实战
Mar 12 Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 Javascript
layui 表单标签的校验方法
Sep 04 Javascript
过滤器vue.filters的使用方法实现
Sep 18 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
萌王史莱姆”萌王性别尴尬!那“萌战”归女组还是男?
2018/12/17 日漫
php实现编辑和保存文件的方法
2015/07/20 PHP
PHP打印输出函数汇总
2016/08/28 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
2015/11/23 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
JavaScript实现左右下拉框动态增删示例
2017/03/09 Javascript
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
浅析 NodeJs 的几种文件路径
2017/06/07 NodeJs
Vue实现路由跳转和嵌套
2017/06/20 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
2019/06/09 Javascript
浅谈Layui的eleTree树式选择器使用方法
2019/09/25 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
python使用内存zipfile对象在内存中打包文件示例
2014/04/30 Python
在服务器端实现无间断部署Python应用的教程
2015/04/16 Python
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
Python的装饰器用法学习笔记
2016/06/24 Python
Django开发中的日志输出的方法
2018/07/02 Python
python同时遍历数组的索引和值的实例
2018/11/15 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
如何把python项目部署到linux服务器
2020/08/26 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
高三地理教学反思
2014/01/11 职场文书
DIY手工制作经营店创业计划书
2014/02/01 职场文书
2015年教研组工作总结
2015/05/04 职场文书
2019辞职报告范本3篇!
2019/07/23 职场文书
vue组件的路由高亮问题解决方法
2021/05/11 Vue.js