(仅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与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
jquery HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 Javascript
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 Javascript
js动态生成Html元素实现Post操作(createElement)
Sep 14 Javascript
一波JavaScript日期判断脚本分享
Mar 06 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
详解vue使用$http服务端收不到参数
Apr 19 Javascript
微信小程序图片自适应实现解析
Jan 21 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中smarty实现多模版网站的方法
2015/06/11 PHP
PHP各种异常和错误的拦截方法及发生致命错误时进行报警
2016/01/19 PHP
JavaScript 代码压缩工具小结
2012/02/27 Javascript
jQuery下通过replace字符串替换实现大小图片切换
2012/05/22 Javascript
用javascript判断IE版本号简单实用且向后兼容
2013/09/11 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
2013/10/11 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
2016/06/10 Javascript
JavaScript遍历求解数独问题的主要思路小结
2016/06/12 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
bootstrap table实例详解
2017/01/06 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
详解小程序原生使用ES7 async/await语法
2018/08/06 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
jQuery实现简单轮播图效果
2020/12/27 jQuery
详解vite+ts快速搭建vue3项目以及介绍相关特性
2021/02/25 Vue.js
[01:05:59]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
Python字符编码判断方法分析
2016/07/01 Python
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
详解Python核心编程中的浅拷贝与深拷贝
2018/01/07 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
python实现人机猜拳小游戏
2020/02/03 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
大学新学期计划书
2014/04/28 职场文书
家长高考寄语
2015/02/27 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python
MYSQL常用函数介绍
2022/05/05 MySQL