(仅IE下有效)关于checkbox 三态

麦浪1125

麦浪1125

2016-02-19 09:34

下面是个(仅IE下有效)关于checkbox 三态教程,撑握了其技术要点,学起来就简单多了。赶紧跟着图老师小编一起来看看吧!
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可以表现的三种状态:
   
第一种和第三种很常见,而且它们是可以使用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(变化顺序:未选中-灰色选中-白色选中)/h3br
form name=test
根据onclick变化的checkbox:br
 input type=checkbox name=checkbox0 flag=0 onclick='gray(this)'初始化为未选中的checkboxbr
 /tdtdinput type=checkbox name=checkbox1 flag=1 onclick='gray(this)'初始化为白色选中的checkboxbr
 /tdtdinput type=checkbox name=checkbox2 flag=2 onclick='gray(this)'初始化为灰色选中的checkboxbr
根据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;idocument.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



展开更多 50%)
分享

猜你喜欢

(仅IE下有效)关于checkbox 三态

Web开发
(仅IE下有效)关于checkbox 三态

如何实现三态选择树

C语言教程 C语言函数
如何实现三态选择树

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

三态选择树实现终结者

C语言教程 C语言函数
三态选择树实现终结者

JQUERY CHECKBOX全选,取消全选,反选方法三

Web开发
JQUERY CHECKBOX全选,取消全选,反选方法三

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

眼下有卧蚕

电脑网络
眼下有卧蚕

CheckBox 如何实现全选?

Web开发
CheckBox 如何实现全选?

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

使用android隐藏api实现亮度调节的方法

使用android隐藏api实现亮度调节的方法

java实现整数转化为中文大写金额的方法

java实现整数转化为中文大写金额的方法
下拉加载更多内容 ↓