(仅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隐式全局变量造成的bug示例代码
Apr 22 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
MvcPager分页控件 适用于Bootstrap
Jun 03 Javascript
Vue路由跳转问题记录详解
Jun 15 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
vue devtools的安装与使用教程
Aug 08 Javascript
Vue v-text指令简单使用方法示例
Sep 19 Javascript
javascript浅层克隆、深度克隆对比及实例解析
Feb 09 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 Javascript
原生js滑动轮播封装
Jul 31 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 随机生成10位字符代码
2009/03/26 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
JavaScript 事件查询综合
2009/07/13 Javascript
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
JS模拟面向对象全解(二、类型与赋值)
2011/07/13 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
H5移动端适配 Flexible方案
2016/10/24 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
JavaScript从原型到原型链深入理解
2019/06/03 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
JavaScript中数组去重的5种方法
2020/07/04 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
Windows下安装python2.7及科学计算套装
2015/03/05 Python
Linux下为不同版本python安装第三方库
2016/08/31 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
Python 实现数据结构-堆栈和队列的操作方法
2019/07/17 Python
通过python3实现投票功能代码实例
2019/09/26 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
python 读取yaml文件的两种方法(在unittest中使用)
2020/12/01 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
浅谈基于HTML5的在线视频播放方案
2016/02/18 HTML / CSS
学校春季防火方案
2014/06/08 职场文书
兽医医药专业求职信
2014/07/27 职场文书
开展创先争优活动总结
2014/08/28 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
详解CSS故障艺术
2021/05/25 HTML / CSS
python中取整数的几种方法
2021/11/07 Python
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android