(僅IE下有效)關于checkbox 三態

2019-11-21 02:05:30

字體：大中小

來源：轉載

供稿：網友

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> 