Краткое руководство: добавление элементов управления "флажок" (HTML)

Статья
03/04/2016

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. В случае разработки приложений для Windows 10 см. раздел последняя документация]

Сведения о создании элементов управления 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 предназначен для отображения информации о состоянии и обычно не запускает действие (кроме флажков в неопределенном состоянии, которые будут описаны в следующем разделе). Вместо того чтобы обрабатывать событие флажка click и немедленно выполнять действие, основанное на состоянии флажка checked, вы обычно считываете состояние checkbox, когда пользователь нажимает кнопку типа "Отправить" для подтверждения набора параметров. (Если вы хотите выполнить действие, используйте вместо этого элемент управления 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, чтобы обозначить смешанный выбор.

Вы можете задать свойство indeterminate только в JavaScript — не существует "неопределенного" атрибута, который вы можете задать в HTML.

Примечание Изменение свойства 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>

Так выглядят элементы управления флажком:

Флажок в неопределенном состоянии

В примере обрабатывается событие click флажка selectAll, так что щелчок по нему запускает функцию 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.

Если каждый дочерний флажок отмечен, она изменяет состояние indeterminate флажка selectAll на false, а состояние checked — на значение true.
Если каждый дочерний флажок не отмечен, она устанавливает состояние indeterminate флажка selectAll на false, а состояние checked — на значение false.
Если некоторые дочерние элементы управления флажком отмечены, а некоторые не отмечены, она устанавливает состояние indeterminate флажка selectAll на 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, поэтому updateCheckboxes вызывается из метода ready.

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 для определения промежуточного состояния.

Далее обратитесь к разделу Оформление элементов управления флажком.

Связанные разделы

Оформление элементов управления флажком

Руководство и контрольный список для элементов управления флажком