三态的checkbox

<body onload=check()>
<h3>三态的checkbox(变化顺序:未选中->灰色选中->白色选中)</h3><br>
<form name=test>
根据onclick变化的checkbox:<br>
 <input type=checkbox name=checkbox0 flag=0 >初始化为未选中的checkbox<br>
 </td><td><input type=checkbox name=checkbox1 flag=1 >初始化为白色选中的checkbox<br>
 </td><td><input type=checkbox name=checkbox2 flag=2 >初始化为灰色选中的checkbox<br>
根据onpropertychange变化的checkbox:<br>
 <input type=checkbox name=checkbox3 onpropertychange="gray2(this)">初始化为未选中的checkbox
</form>
</body>
<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;
   }
  }
 }
}
</script>

时间: 2024-09-16 05:57:00

三态的checkbox的相关文章

三态选择树实现终结者

示例代码运行效果图如下: 在很多情况下,我们经常需要实现树的多态选择,如上图所示,当全部子节点选中的情况下,当前节点才被选中(如图示[荆门市]节点),当子节点部分选中时,当前节点处于第三态(如图示[湖北省]节点)当全部子节点未选中时,当前节点处于未选中的状态(如图示[江苏省]节点).本文就介绍这种三态选择树的具体实现方法. 在VC知识库第十九期中河南科技大学丛雷朋友也介绍了一种实现方法,两种方法比较,本文介绍的方法实现简单,兼容原CTreeCtrl的全部操作,CheckBox也是采用控件本身的C

WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式

原文:WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式 一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: CheckBox复选框的自定义样式,有两种不同的风格实现: RadioButton单选框自定义样式,有两种不同的风格实现: 二. CheckBox自定义样式 2.1 CheckBox基本样式 标准CheckBox样式代

asp.net winform TreeView节点中的CheckBox 禁用实例

  发现TreeNode没有相关属性,TreeView中的CheckBox也基本没法控制,于是上网求救,基本上都在说废话,有些大侠竟然连WinForm和WebForm都分不清. 有人说把节点字体颜色设置成灰色,然后:  代码如下 复制代码         private void myTreeView1_BeforeCheck(object sender, TreeViewCancelEventArgs e)         {             if(e.Node.ForeColor==

extjs4.2 三态树

问题描述 js比较菜,请问下哪位大神写过extjs4.2的三态树给个源码,或者给个思路,貌似extjs3.x是通过重写Ext.ux.TreeCheckNodeUI控件,那时4貌似没有这个类啊. 解决方案 Extjs4在Ext.tree.Panel中对带有checkbox的树的节点的选择上和extjs3不一样,主要是在tree上添加checkchange事件left_tree.on('checkchange',function(node, checked){checkboxSelected(nod

checkbox-asp.net中关于CheckBox知识问答

问题描述 asp.net中关于CheckBox知识问答 asp.net 中把中的值传入数据库的后台代码

IE下双击checkbox反应延迟问题的解决方法

 这篇文章主要介绍了IE下双击checkbox反应延迟问题的解决方法,需要的朋友可以参考下  代码如下: <span style="font-size:18px;"><input type='checkbox'/></span>    上面这段代码在IE下会生成一个多选框,单击它会选中打勾,再次单击则会取消打勾.    这样看上去并没有什么不妥的地方,但是如果你尝试快速两次单击(比双击稍微慢一点吧..)这个按钮,可能效果并不如你想象的那样.    在

前端的小玩意(4)自定义checkbox或者radio的外观

原理: 通过隐藏原有的(调透明度和绝对定位),然后用一个新的图标来覆盖上去 CSS代码: .radio { /*这个描述的是输入框的基本样式,透明,绝对定位,浮动在最下*/ opacity: 0; position: absolute; z-index: -1; /*这行是让原图标被其他的遮挡,避免挡住其他按钮影响事件触发*/ <span style="font-family: Arial, Helvetica, sans-serif;">/* </span>o

Javasript的checkbox的一个问题

问题 JavaScript的checkbox框架可以如下使用: <FORM NAME="list" METHOD="post"><INPUT name=no TYPE=checkbox><INPUT name=no TYPE=checkbox><INPUT name=no TYPE=checkbox></FORM> 在js中:for(var i=0;i<document.list.no.length;

同名checkbox的分级操作

<html><head><title>this is a test!</title></head><body><h1>This is a Test!</h1><form action="" name = "test"><input name="checkboxfather1" type="checkbox" >