빠른 시작: 확인란 컨트롤 추가(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는 선택됩니다.
.png "확인란 네 개")
확인란이 선택되었는지 확인
checkbox는 click 이벤트를 포함하여 다른 input 요소와 동일한 이벤트를 지원합니다. 그러나 checkbox는 상태 정보 제공에 사용되며 일반적으로 작업을 트리거하지 않습니다. 단, 다음 섹션에서 설명할 확정되지 않은 상태 확인란의 경우는 제외됩니다. 확인란의 click 이벤트를 처리하고 확인란의 checked 상태를 기반으로 하는 작업을 바로 수행하기 보다는 일반적으로 사용자가 "제출"과 같은 종류의 단추를 클릭하면 checkbox 상태를 읽고 일련의 옵션을 커밋합니다. 작업을 수행하려면 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 });
다음을 코드를 실행하고 단추를 클릭할 때 표시되는 모양입니다.
.png "확인란 네 개")
확정되지 않은 상태 확인란 만들기
옵션이 둘 이상의 개체에 적용되는 경우 확인란을 사용하여 해당 옵션이 이러한 개체의 전부 또는 일부에 적용되는지 아니면 아무 개체에도 적용되지 않는지 여부를 나타낼 수 있습니다. 옵션이 모든 개체가 아닌 일부 개체에 적용되는 경우 확인란의 indeterminate 상태를 사용하여 혼합 선택을 나타냅니다.
indeterminate 속성은 JavaScript에서만 설정할 수 있습니다.—즉, 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>
다음은 확인란 컨트롤이 표시되는 모양입니다.
.png "확정되지 않은 상태의 확인란")
예제에서는 클릭하면 checkAll 함수가 트리거되도록 selectAll 확인란의 click 이벤트를 처리합니다.
<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를 public으로 설정합니다.
WinJS.Namespace.define("CheckboxExamples",
{
checkAll: checkAll,
updateCheckboxes: updateCheckboxes
});
여기서 수행할 작업이 하나 이상 있습니다. 두 번째 옵션은 checked 상태로 시작됩니다.
<label>
<input id="Checkbox2" type="checkbox" class="checkboxExample2" checked />Option 2
</label>
selectAll 확인란은 깨끗하거나 "선택 취소된" 상태로 시작되고 updateCheckboxes 메서드는 사용자가 확인란을 클릭한 다음에야 호출됩니다. 따라서 예제 코드가 실행되면 확정되지 않은 상태여야 하는 selectAll 확인란은 선택 취소된 상태입니다.
.png "모두 선택 확인란은 확정되지 않은 상태여야 합니다.")
문제를 해결하려면 페이지가 로드될 때 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 속성을 사용하여 중간 상태를 나타내는 방법을 살펴보았습니다.
다음으로 확인란 컨트롤의 스타일을 지정하는 방법을 살펴보겠습니다.