(仅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 相关文章推荐
使用javascript实现判断当前浏览器
Apr 14 Javascript
JavaScript实现页面5秒后自动跳转的方法
Apr 16 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
JavaScript实现复制文章自动添加版权
Aug 02 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
Vue表单实例代码
Sep 05 Javascript
基于javascript实现按圆形排列DIV元素(二)
Dec 02 Javascript
关于Vue的路由权限管理的示例代码
Mar 06 Javascript
js实现图片上传并预览功能
Aug 06 Javascript
js实现旋转木马轮播图效果
Jan 10 Javascript
Node 模块原理与用法详解
May 13 Javascript
解决vuex数据页面刷新后初始化操作
Jul 26 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实现的简单网络硬盘
2015/07/29 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
PHP hex2bin()函数用法讲解
2019/02/25 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
PHP7 新增常量
2021/03/09 PHP
自己的js工具 Cookie 封装
2009/08/21 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
window.parent与window.openner区别介绍
2012/04/12 Javascript
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
2013/11/15 Javascript
js判断设备是否为PC并调整图片大小
2014/02/12 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
2014/07/14 Javascript
jQuery制作仿Mac Lion OS滚动条效果
2015/02/10 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
2016/08/10 Javascript
微信小程序 radio单选框组件详解及实例代码
2017/01/10 Javascript
JavaScript判断浏览器及其版本信息
2017/01/20 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
2018/08/25 Javascript
小程序云开发之用户注册登录
2019/05/18 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
Python编程之微信推送模板消息功能示例
2017/08/21 Python
Python跨文件全局变量的实现方法示例
2017/12/10 Python
对python的文件内注释 help注释方法
2018/05/23 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
python设置环境变量的作用和实例
2019/07/09 Python
logging level级别介绍
2020/02/21 Python
好的自荐信的要求
2013/10/30 职场文书
播音主持专业个人自我评价
2014/01/09 职场文书
护士辞职信范文
2014/01/19 职场文书
私营公司诉讼代理委托书范本
2014/09/13 职场文书
创先争优活动个人总结
2015/03/04 职场文书
关于国庆节的广播稿
2015/08/19 职场文书
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技