快速入門：新增核取方塊控制項 (HTML)

發行項
03/04/2016

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

了解如何建立 checkbox 控制項。使用核取方塊對使用者顯示二元選項 (一或多個沒有互斥的選項) 或混合選項。

先決條件

快速入門：新增 HTML 控制項和處理事件

建立核取方塊

若要建立 checkbox，請建立 input 元素，並將 type 屬性設為 "checkbox"。您將 checkbox 的文字新增到 input 元素結束標記的後方**。

秘訣新增 checkbox 後，將它放置在 label 元素中，以增加回應使用者互動的區域大小。這樣做可以在觸控裝置上更輕鬆地使用核取方塊。

根據預設，在使用者按一下核取方塊前，核取方塊都是清除的或未核取的狀態。若要讓 checkbox 一開始就是選取或核取狀態，使用 checked 屬性。這個範例會建立四個核取方塊控制項，並使用 checked 屬性讓第二個核取方塊的狀態為已核取。


.controlGroup
{
    margin: 0px 0px 20px 0px;
    padding: 0px;
    border: 0px;
}

.controlGroupName
{
    font:normal normal normal 11pt/15pt "Segoe UI Semilight";
    font-size: 11pt; 
    margin:0px 0px 10px 0px;
    padding:0px;
    border: 0px;
    position:relative;
    vertical-align:top;
    display:block;
}

.verticalStacking input[type="checkbox"]
{
    margin-bottom: 16px;
}

<div style="margin: 20px">
<fieldset class="controlGroup verticalStacking">
    <legend class="controlGroupName">Choose an option:</legend>
    <label>
        <input id="option1" type="checkbox" class="checkboxExample1"  />Option 1
    </label>
    <br />
    <label>
        <input id="option2" type="checkbox" class="checkboxExample1" checked />Option 2
    </label>
    <br />
    <label>
        <input id="option3" type="checkbox" class="checkboxExample1" />Option 3
    </label>
    <br />
    <label>
        <input id="option4" type="checkbox" class="checkboxExample1" />Option 4
    </label>
    </fieldset>
</div>

執行程式碼時，選項 1、3 和 4 是未核取的，但選項 2 是已核取的。

四個核取方塊

判斷核取方塊是否核取

checkbox 與其他 input 元素支援相同的事件，包含 click 事件。不過，checkbox 的目的是用來顯示狀態資訊，而且通常不會觸發動作 (不確定的核取方塊的情況除外，我們將在下節詳細說明)。您通常會在使用者按一下 [提交] 這類按鈕時讀取 checkbox 狀態以認可一組選項，而不是處理核取方塊的 click 事件，並根據核取方塊的 checked 狀態立即執行動作(如果您想要執行動作，請改用 ToggleSwitch 控制項)。

若要判斷核取方塊是否已經核取，使用checked 屬性。這個範例會建立 button 來顯示上個範例所建立之核取方塊控制項的 checked 值。

function evaluateCheckboxState(eventInfo) {
    var outputDiv = document.getElementById("checkedStateOutput");
    var output = "<ul>";
    WinJS.Utilities.query(".checkboxExample1").forEach(function (checkbox) {
        output += "<li>" + checkbox.id + " checked: " + checkbox.checked + "</li>"; 
    }); 
    outputDiv.innerHTML = output + "</ul>"; 

}

WinJS.Namespace.define("CheckboxExamples",
    { evaluateCheckboxState: evaluateCheckboxState });

以下為執行程式碼並按一下按鈕後看起來的樣子：

四個核取方塊

建立不確定的核取方塊

當選項適用於一個以上的物件時，您可以使用一個核取方塊以指示選項是否適用於全部、部分物件或全部不適用。當選項適合於這些物件的其中一些而非全部時，請使用核取方塊的 indeterminate 狀態來表示混合選項。

您只能在 JavaScript 設定 indeterminate 屬性 — HTML 沒有可以設定的 "indeterminate" 屬性。

注意變更核取方塊的 indeterminate 屬性不會自動變更其 checked 值。

這個範例會建立 "Select all" 核取方塊，可以讓您核取或取消核取一組子核取方塊控制項 (選項 1-4)。

<fieldset class="controlGroup verticalStacking">
    <legend class="controlGroupName">Choose an option:</legend>

    <label>
        <input type="checkbox" id="selectAll" onclick="CheckboxExamples.checkAll(event)" />Select all
    </label>
    <div style="margin-left: 29px" onclick="CheckboxExamples.updateCheckboxes(event)">
        <label>
            <input id="Checkbox1" type="checkbox" class="checkboxExample2"  />Option 1
        </label>
        <br />
        <label>
            <input id="Checkbox2" type="checkbox" class="checkboxExample2" checked />Option 2
        </label>
        <br />
        <label>
            <input id="Checkbox3" type="checkbox" class="checkboxExample2" />Option 3
        </label>
        <br />
        <label>
            <input id="Checkbox4" type="checkbox" class="checkboxExample2" />Option 4
        </label>
    </div>

</fieldset>

核取方塊控制項看起來像這樣：

不確定狀態的核取方塊

這個範例會處理 selectAll 核取方塊的 click 事件，因此按一下該事件會觸發 checkAll 函式。

<input type="checkbox" id="selectAll" onclick="CheckboxExamples.checkAll(event)" />Select all

checkAll 函式會在您核取或取消核取 selectAll 核取方塊時，核取或取消核取所有其他核取方塊控制項。

function checkAll(eventInfo) {

    var options = document.getElementsByClassName("checkboxExample2");
    for (var i = 0; i < options.length; i++) {
        options[i].checked = event.srcElement.checked;
    }
}

按一下任何子核取方塊控制項，就會呼叫 updateCheckboxes 函式。

<div style="margin-left: 29px" onclick="CheckboxExamples.updateCheckboxes(event)">

它會找出每個核取方塊的已核取狀態，然後更新 selectAll 核取方塊。

如果每個子核取方塊都已核取，則會將 selectAll 核取方塊的 indeterminate 狀態設為 false，並將其 checked 值設為 true。
如果每個子核取方塊都未核取，則會將 selectAll 核取方塊的 indeterminate 狀態設為 false，並將其 checked 值設為 false。
如果部分子核取方塊控制項已核取但有部分未核取，則會將 selectAll 核取方塊的 indeterminate 狀態設為 true，並將其 checked 值設為 false。

function updateCheckboxes(eventInfo) {
    var options = document.getElementsByClassName("checkboxExample2");
    var selectedCount = 0;
    for (var i = 0; i < options.length; i++) {
        if (options[i].checked) {
            selectedCount++;
        }
    }

    // Update the selectAll checkbox
    // to reflect the state of the child checkboxes.
    var selectAll = document.getElementById("selectAll"); 
    if (options.length === selectedCount) {
        selectAll.indeterminate = false;
        selectAll.checked = true;
    } else if (0 === selectedCount) {
        selectAll.indeterminate = false;
        selectAll.checked = false;
    } else {
        selectAll.indeterminate = true;
        //selectAll.checked = false;
    }
}

本範例接下來會使用 WinJS.Namespace.define 將 checkAll 和 updateCheckboxes 設為公用。

WinJS.Namespace.define("CheckboxExamples",
    {
        checkAll: checkAll,
        updateCheckboxes: updateCheckboxes
    });

這裡還要做一件事。第二個選項一開始為 checked 狀態：

<label>
    <input id="Checkbox2" type="checkbox" class="checkboxExample2" checked />Option 2
</label>

selectAll 核取方塊一開始為清除或「未核取」狀態，並等到使用者按一下核取方塊才呼叫 updateCheckboxes 方法。因此，執行範例程式碼時，當 selectAll 核取方塊應該為不確定狀態時，該核取方塊為未核取狀態：

全選核取方塊應該為不確定狀態

若要修正這個問題，載入頁面時新增 updateCheckboxes 呼叫。

如果您的程式碼位於 PageControl，使用 ready 方法呼叫 updateCheckboxes。
如果您的程式碼位於應用程式的 default.js 檔案，則使用 activated 事件處理常式呼叫 updateCheckboxes。
在任一種情況下，您也可以處理 DOMContentLoaded 事件，並使用處理常式呼叫 updateCheckboxes。

這個範例使用 PageControl，因此會從 ready 方法呼叫 updateCheckboxes。

WinJS.UI.Pages.define("/pages/checkbox/checkbox.html", {
    // This function is called whenever a user navigates to this page. It
    // populates the page elements with the app's data.
    ready: function (element, options) {
        // TODO: Initialize the page here.

        CheckboxExamples.updateCheckboxes(); 
    },

    unload: function () {
        // TODO: Respond to navigations away from this page.
    },

    updateLayout: function (element, viewState, lastViewState) {
        /// <param name="element" domElement="true" />

        // TODO: Respond to changes in viewState.
    }
});

摘要與後續步驟

您已學會如何建立 checkbox 控制項、如何找出它們的狀態，以及如何使用 indeterminate 屬性指出中間狀態。

接下來，請看如何設定核取方塊控制項的樣式。

共用方式為