快速入门：添加复选框控件 (HTML)

项目
03/04/2016

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅最新文档 ]

了解如何创建 checkbox 控件。使用复选框可向用户提供二元选项、一个或多个不相互排斥的选项或者混合选项。

先决条件

快速入门：添加 HTML 控件和处理事件

创建复选框

若要创建 checkbox，请创建一个 input 元素并将其 type 元素设置为 "checkbox"。你可以在 input 元素的结束标记后添加 checkbox 的文本 。

提示在添加 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 属性。本例创建显示上例中创建的复选框控件的 checked 值的 button。

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 值。

本例创建选中或取消选中一组子复选框控件（选项 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

当选中或取消选中 selectAll 复选框时，checkAll 函数选中或取消选中所有其他复选框控件。

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 属性以指示中间状态。

接下来，让我们来了解下如何设置复选框控件的样式。

通过