-
複選框
鎖定
複選框是一種可同時選中多項的基礎控件，也是基於計算機語言的編程代碼框架。一般控制的方法是：使用鼠標左鍵進行點選操作，複選多個目標。
- 中文名
- 複選框
- 外文名
- CheckBox
複選框內容介紹
控件
複選框，也叫做 CheckBox，是一種基礎控件。.NET 程序包含這個控件，它可以通過其屬性和方法完成複選的操作。為了完成更多複雜的需求，也出現了第三方控件的複選框，將其 dll 添加到項目引用中，就可以使用更多功能的複選框控件。
Java 的複選框
複選框提供一個製造單一選擇開關的方法；它包括一個小框和一個標籤。典型的複選框有一個小 “X”（或者它設置的其它類型）或是空的，這依照項目是否被選擇來決定。
可以使用構建器正常地創建一個複選框，使用它的標籤來充當它的自變量。如果在創建複選框後想讀出或改變它，通過代碼能夠獲取和設置它的狀態，同樣也能獲取和設置它的標籤。注意，複選框的大寫是與其它的控制相矛盾的。
無論何時一個複選框都可以設置和清除一個事件指令，也都可以捕捉同樣的方法做一個按鈕。在下面的例子裏使用一個文字區域枚舉所有被選中的複選框：
//: CheckBox1.javafdf
// Using check boxes
import java.awt.*;
import java.applet.*;
public class CheckBox1 extends Applet {
TextArea t = new TextArea(6, 20);
Checkbox cb1 = new Checkbox("Check Box 1");
Checkbox cb2 = new Checkbox("Check Box 2");
Checkbox cb3 = new Checkbox("Check Box 3");
}
public void init() {
add(t); add(cb1); add(cb2); add(cb3);
}
public boolean action (Event evt, Object arg) {
if (evt.target.equals(cb1)) {
trace("1", cb1.getState());
} else if (evt.target.equals(cb2)) {
trace("2", cb2.getState());
} else if (evt.target.equals(cb3)) {
trace("3", cb3.getState());
} else {
return super.action(evt, arg);
}
return true;
}
void trace(String b, boolean state) {
if (state) {
t.appendText("Box " + b + " Set\n");
} else {
t.appendText("Box " + b + " Cleared\n");
}
}trace() 方法將選中的複選框名和當前狀態用 appendText() 發送到文字區域中去，所以可以看到一個累積的被選中的複選框和它們的狀態的列表。
複選框建立
Word
點擊 Word“視圖”菜單，在“工具欄”項中點“控件工具箱”（在 office2010 中，選擇“文件”→“選項”→“自定義功能區”→勾選右側 “開發工具 ”→確定，之後頂上的標籤菜單會出現一個 開發工具），會在 Word 窗口的編輯區左側出現一個新的工具條，這就是“控件工具箱”，其中有一個按鈕是內部有小對勾的方框，用鼠標指向時會出現“複選框”的提示。
點“複選框”按鈕，會在 Word 頁面上出現一個叫標有“CheckBox1”的小方框，即“第 1 複選框”，前面的小方框就是複選框，底紋是灰色，點“控件工具箱”的第一個按鈕“退出設計模式”就可以在內部打對勾的，也可以取消對勾。再點“複選框”按鈕，會在頁面上再出現一個“複選框”標籤，叫“CheckBox2”，即“第 2 複選框”。往下依次類推。
在這些標籤上僅僅顯示“CheckBox1”和“CheckBox2”肯定是不能滿足要求的，要修改這些標籤內容。底紋要變為白色，要和文字融為一體。
按下“控件工具箱”第一個按鈕，使它處於“設計模式”，點中一個“複選框”，四周會出現八個小圓圈，處於選中狀態，點“控件工具箱”第二個按鈕，在左側出現一個“屬性”對話框，點“BackColor”項，這是設置背景顏色的，右邊的單元格中出現個下拉三角，點擊，選中合適的顏色。點“Caption”項，當單元格為藍色時，右側的單元格就可以編輯了，輸入需要的文字，Word 的正文中立即就變成了輸入的文字。點“控件工具箱”的第一個按鈕“退出設計模式”，可以預覽效果。
Excel
窗體工具條控件介紹
“複選框”控件。可選中一個或同時選中多個複選框，以打開或者關閉某選項。其值確定複選框的狀態，即該複選框是處於未選擇、已選擇或混合狀態；單元格鏈接即是返回複選框狀態值的單元格，若選中複選框，則與其相鏈接的單元格值為 True；若未選擇複選框，則與其相鏈接的單元格值為 False；若複選框處於混合狀態，則與其相鏈接的單元格值為 #N/A；若與其相鏈接的單元格為空，則 Excel 認為複選框狀態為 False。選中 3D 陰影將以三維陰影效果顯示覆選框。
複選框效果實現
實現複選框的全選和反選
解決思路：
全選的實現：遍歷所有複選框，然後設置各多選項的 checked 屬性為 true。反選的實現：遍歷所有複選框，獲取複選框的 checked 屬性值，是 true 的話則設置為 false，否則設為 true，即作當前值的相反設置。
具體步驟：
代碼示例：
<script>
function selectit(){
//設置變量form的值為name等於select的表單
var form=document.select
//取得觸發事件的按鈕的name屬性值
var action=event.
for (var i=0;i<form.elements.length;i++){//遍歷表單項
//將當前表單項form.elements對象簡寫為e
var e = form.elements
//如果當前表單項的name屬性值為iTo，
//執行下一行代碼。限定腳本處理的表單項範圍。
if (e.name == "iTo")
/*如果單擊事件發生在name為selectall的按鈕上，就將當前表單項的checked屬性設為true(即選中)，否則設置為當前設置的相反值(反選)*/
e.checked =(action=="selectall")?(form.selectall.checked):(!e.checked)
}
}
</script>
<form name="select">
<INPUT type="checkbox" name="selectall" onclick="selectit()">全選
<INPUT type="checkbox" name="Inverse" onclick="selectit()">反選
<INPUT type="checkbox" name="iTo" value="1">1
<INPUT type="checkbox" name="iTo" value="2">2
<INPUT type="checkbox" name="iTo" value="3">3
<INPUT type="checkbox" name="iTo" value="4">4
<INPUT type="checkbox" name="iTo" value="5">5
</form>注意：本例中能被全選或反選的複選框必須設置 name 為 iTo。
技巧：在本例中其實不用遍歷表單的每個元素，只需要遍歷 getElementsByName("iTo") 集合即可。
特別提示
代碼運行後，選中“全選”複選框，所有 name 為 iTo 的複選框將被選中。
特別説明
本例需要掌握的內容是對錶單項的遍歷和複選框的選中或不選中狀態的設置或獲取。
checked 設置或獲取複選框或單選鈕的狀態，true 為選中，false 為不選中。
elements 獲取以源順序排列的指定表單中所有控件的集合(不包括圖像類型的控件對象)。
複選框全選、全不選和反選效果
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>網頁特效代碼--複選框全選、全不選和反選的效果實現</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function checkAll() {
for (var j = 1; j <= 9; j++) {
box = eval("document.checkboxform.C" + j);
if (box.checked ==false) box.checked =true;
}
}
function uncheckAll() {
for (var j = 1; j <= 9; j++) {
box = eval("document.checkboxform.C" + j);
if (box.checked ==true) box.checked =false;
}
}
function switchAll() {
for (var j = 1; j <= 9; j++) {
box = eval("document.checkboxform.C" + j);
box.checked = !box.checked;
}
}
// End -->
</script>
</head>
<body>
<form name=checkboxform>
<input type=checkbox name=C1 checked>C1<br>
<input type=checkbox name=C2 checked>C2<br>
<input type=checkbox name=C3 checked>C3<br>
<input type=checkbox name=C4 checked>C4<br>
<input type=checkbox name=C5 checked>C5<br>
<input type=checkbox name=C6 checked>C6<br>
<input type=checkbox name=C7 checked>C7<br>
<input type=checkbox name=C8 checked>C8<br>
<input type=checkbox name=C9 checked>C9<br>
<br>
<input type=button value="全部選中" onClick="checkAll()"><br>
<input type=button value="全部不選" onClick="uncheckAll()"><br>
<input type=button value="選擇轉換" onClick="switchAll()"><br>
</form>
</body>
</html>