Heim > Web-Frontend > js-Tutorial > Hauptteil

(仅IE下有效)关于checkbox 三态_表单特效

WBOY
Freigeben: 2016-05-16 19:13:31
Original
1168 Leute haben es durchsucht

From:http://www.cnblogs.com/birdshome/archive/2005/01/03/85679.html 
    我们在使用Windows XP的文件夹属性对话框时,会发现文件夹的Attributes分类里的Read-only和Hidden选项有时不是完全的checked或unchecked状态,而常常是一种虽然已被打勾但背景又是灰色的状态。其实这种不确定的CheckBox状态Web中也是可以表现的。  

    在Web页面中,我们可以使用来得到一个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

复制代码 代码如下:


三态的checkbox(变化顺序:未选中->灰色选中->白色选中)




根据onclick变化的checkbox:

 初始化为未选中的checkbox

  初始化为白色选中的checkbox

  初始化为灰色选中的checkbox

根据onpropertychange变化的checkbox:

 初始化为未选中的checkbox

<script> <BR>//用于onclick,需要一个自定义属性flag. <BR>function gray(c) <BR>{ <BR> switch(c.flag) <BR> { <BR> //当flag为0时,为未选中状态 <BR> case '0':c.checked=true;c.indeterminate=true;c.flag='2';break; <BR> //当flag未1时,为白色选中状态 <BR> case '2':c.checked=true;c.indeterminate=false;c.flag='1';break; <BR> //当flag为2时,为灰色选中状态 <BR> case '1':c.checked=false;c.indeterminate=false;c.flag='0';break; <BR> } <BR>} <BR>//用于onpropertychange <BR>function gray2(c) <BR>{ <BR> c.indeterminate=c.checked; <BR>} <BR>//用于body的onload,根据checkbox的flag属性判断checkbox的状态 <BR>function check() <BR>{ <BR> for(var i = 0;i<document.test.elements.length;i++) <BR> { <BR> var ele = document.test.elements[i]; <BR> if(ele.flag!=null) <BR> { <BR> if(ele.flag=='0') <BR> { <BR> ele.checked = false; <BR> ele.indeterminate = false; <BR> } <BR> if(ele.flag=='1') <BR> { <BR> ele.checked = true; <BR> ele.indeterminate = false; <BR> } <BR> if(ele.flag=='2') <BR> { <BR> ele.checked = true; <BR> ele.indeterminate = true; <BR> } <BR> } <BR> } <BR>} <BR>window.onload=check; <BR></script>



Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage