(仅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(变化顺序:未选中->灰色选中->白色选中)</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>

赞 (0)

相关推荐

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

    (仅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

  • js点击文本框弹出可选择的checkbox复选框

    本文分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解和扩展. 代码如下: <html> <head> <meta charset="gb2312"> <title>js点击文本框弹出可选择的checkbox复选框</title> <style type="text/

  • 关于onchange事件在IE和FF下的表现及解决方法

    在最近做的一个项目中,有这么一个功能点:页面上有一个checkbox,当用户选择或者取消选择该checkbox时会向后台发一个jsonp请求.当时的实现是为这个checkbox添加一个onchange事件,但结果却出人意料,为此,我深入的研究了一下,发现了onchange事件在IE和FF下的表现存在着以下问题. 问题①:在FF下,当改变checkbox的选中状态时,会马上触发onchange事件.但在IE下改变checkbox的选中状态时,并不会马上出发onchange事件,而是需要等待chec

  • Jquery 实现checkbox全选方法

    昨天早上有写到怎么利用Jquery实现全选 根据大家的意见对程序中一些写法不好的地方进行了修改,也是本人水平有限,存在各种考虑不到的地方. 文章最后我提出了一个问题,要写一个通用的方法来调用,于是就有了现在的这篇文章,晚上回到家,我就写出了效果 下面的例子可以供大家讨论学习,如果觉得不错也可以直接应用到项目中. 1:为什么要写这个方法 网上实现一句话全选全不选的有很多,但是好像都忽略了一个问题,全选的checkbox可以控制下面的子checkbox,但是下面的子checkbox应该也可以控制上面

  • 使用button标签，实现三态图片按钮

    三态图片按钮对于好的用户体验来说必不可少.我对dom事件进行一些处理,在不改变html的情况下,实现了三态按钮.下面的解决方法的关键,主要是去掉虚线选框和对背景进行定位,没有使用循环处理,任何一个按钮,只要定义了背景图片和边框为0,就自动变成了三态按钮. if(document.all) document.execCommand("BackgroundImageCache",false,true) document.body.onload=function(){ if(document

  • android使用PullToRefresh框架实现ListView下拉刷新上拉加载更多

    android使用PullToRefresh框架实现ListView下拉刷新上拉加载更多

    本文实例为大家分享了Android实现ListView下拉刷新上拉加载更多的具体代码,供大家参考,具体内容如下 其实谷歌官方目前已经推出ListView下拉刷新框架SwipeRefreshLayout,想了解的朋友可以点击 android使用SwipeRefreshLayout实现ListView下拉刷新上拉加载了解一下: 大家不难发现当你使用SwipeRefreshLayout下拉的时候布局文件不会跟着手势往下滑,而且想要更改这个缺陷好像非常不容易. 虽然SwipeRefreshLayout非

  • Python获取指定文件夹下的文件名的方法

    本文采用os.walk()和os.listdir()两种方法,获取指定文件夹下的文件名. 一.os.walk() 模块os中的walk()函数可以遍历文件夹下所有的文件. os.walk(top, topdown=Ture, onerror=None, followlinks=False) 该函数可以得到一个三元tupple(dirpath, dirnames, filenames). 参数含义: dirpath:string,代表目录的路径: dirnames:list,包含了当前dirpat

  • Python 获取指定文件夹下的目录和文件的实现

    经常有需要扫描目录,对文件做批量处理的需求,所以对目录处理这块做了下学习和总结.Python 中扫描目录有两种方法:os.listdir 和 os.walk. 一.os.listdir 方法 os.listdir() 方法用于返回指定的目录下包含的文件或子目录的名字的列表.这个列表以字母顺序.其得到的是仅当前路径下的文件名,不包括子目录中的文件,如果需要得到所有文件需要递归. 它也不包括 '.' 和 '..' 即使它在目录中. 语法格式如下: os.listdir(path) 实例代码 def

  • 特定用例下的Combine全面使用详解

    目录 引言 网络 URLSession Extension Codable 向多个 Subscriber 发布网络数据 调试 打印事件 执行副作用 使用 Debugger Operator Timer 使用 RunLoop 使用 Timer 类 使用 DispatchQueue KVO publisher(for:options:) 自定义的 KVO 兼容属性 Observation options ObservableObject 资源管理 share() multicast(_:) Futu

  • PHP+MYSQL的文章管理系统(二)

    ###############index.php###################### <?session_start(); require"./inc/func.php"; mscon(); require "./inc/header.inc"; ?> <script language="javascript"> function opwin(filename) {                window.op

随机推荐