快速入门:添加复选框控件 (HTML)
[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发,请参阅 最新文档 ]
了解如何创建 checkbox 控件。使用复选框可向用户提供二元选项、一个或多个不相互排斥的选项或者混合选项。
先决条件
创建复选框
若要创建 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 属性以指示中间状态。
接下来,让我们来了解下如何设置复选框控件的样式。