Inicio rápido: agregar casillas de verificación (HTML)

Artículo
03/04/2016

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

Obtén información sobre cómo crear controlees checkbox. Usa casillas para presentar a los usuarios la selección de una opción de dos, una o varias opciones que no sean mutuamente excluyentes o incluso opciones mixtas.

Requisitos previos

Inicio rápido: Agregar controles HTML y controlar eventos

Crear una casilla

Para crear una checkbox, crea un elemento input y establece su atributo type en "checkbox". Agrega texto para la checkbox después de la etiqueta de cierre del elemento input.

Sugerencia Cuando agregues una checkbox, enciérralo en un elemento label para aumentar el tamaño del área que responde a la interacción del usuario. Al hacerlo, facilitarás el uso de la casilla en dispositivos móviles.

De manera predeterminada, la casilla está desactivada hasta que el usuario hace clic en ella. Para hacer que una checkbox se muestre inicialmente como seleccionada o activada, usa el atributo checked. En este ejemplo, se crean cuatro casillas de verificación y se activa la segunda mediante el atributo 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>

Cuando ejecutes el código, las opciones 1, 3 y 4 estarán desactivadas, pero la opción 2 estará activada.

Cuatro casillas.

Determina si una casilla está activada

La checkbox admite los mismos eventos que otros elementos input, incluido el evento click. De todos modos, la checkbox proporciona información de estado y no suele desencadenar una acción (salvo en las casillas con estado indeterminado, que explicaremos en la siguiente sección). En lugar de controlar el evento click de la casilla y realizar una acción de inmediato según el estado checked de la casilla, por lo general, lees el estado de la checkbox cuando el usuario hace clic en algún tipo de botón Enviar para confirmar un conjunto de opciones. (Si quieres realizar una acción, usa un control ToggleSwitch en su lugar).

Para determinar si una casilla está activada, usa su propiedad checked. En este ejemplo, se crea un button que muestra los valores de checked de las casillas de verificación creadas en el ejemplo anterior.

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 });

Este es el aspecto de las casillas cuando ejecutas código y haces clic en el botón:

Cuatro casillas.

Crea una casilla con estado indeterminado

Cuando una opción se aplica a más de un objeto, puedes usar una casilla para indicar si la opción se aplica a todos los objetos, a algunos o a ninguno. Cuando la opción se aplica a varios objetos, pero no a todos, usa el estado indeterminate de la casilla para representar una opción mixta.

Solo puedes establecer la propiedad indeterminate en JavaScript: no hay atributos "indeterminate" que puedas establecer en HTML.

Nota Cambiar la propiedad indeterminate de una casilla no cambia automáticamente su valor checked.

En este ejemplo, se crea una casilla "Select all" (Seleccionar todos) que activa o desactiva un conjunto de casillas de verificación secundarias (opciones 1 a 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>

Las casillas de verificación tienen este aspecto:

Una casilla en el estado indeterminado.

En este ejemplo, se controla el evento click de la casilla selectAll, de modo que, al hacer clic en ella, se desencadene la función checkAll.

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

La función checkAll activa o desactiva todas las demás casillas de verificación cuando activas o desactivas la casilla selectAll.

function checkAll(eventInfo) {

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

Se llama a la función updateCheckboxes cuando se hace clic en alguna de las casillas de verificación.

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

Esta permite conocer el estado activado de cada casilla y actualiza la casilla selectAll.

Si se activan todas las casillas secundarias, establece el estado indeterminate de la casilla selectAll en false, y su valor checked, en true.
Si se desactivan todas las casillas secundarias, establece el estado indeterminate de la casilla selectAll en false, y su valor checked, en false.
Si se activan algunas casillas secundarias y se desactivan otras, establece el estado indeterminate de la casilla selectAll en true, y su valor checked, en 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;
    }
}

En la parte siguiente del ejemplo, se usa WinJS.Namespace.define para hacer checkAll y updateCheckboxes públicos.

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

Hay algo más que hacer en este punto. La segunda opción permite que las casillas se muestren inicialmente en el estado checked:

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

La casilla selectAll se muestra inicialmente en el estado desactivado, y se llama al método updateCheckboxes solo cuando el usuario hace clic en una casilla. Por eso, cuando se ejecute el código de ejemplo, la casilla selectAll estará desactivada cuando debería estar en el estado indeterminado.

La casilla Select all (Seleccionar todos) debe estar en el estado indeterminado.

Para corregir este problema, agrega una llamada a updateCheckboxes cuando se cargue la página.

Si tu código está en un PageControl, usa un método ready para llamar a updateCheckboxes.
Si tu código está en el archivo default.js de la aplicación, usa el controlador de eventos activated para llamar a updateCheckboxes.
En ambos casos, también puedes controlar el evento DOMContentLoaded y usar el controlador para llamar a updateCheckboxes.

En este ejemplo, se usa un PageControl para que llame a updateCheckboxes desde el método 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.
    }
});

Resumen y siguientes pasos

Aprendiste a crear controles checkbox, a detectar el estado y a usar la propiedad indeterminate para indicar un estado intermedio.

A continuación, echa un vistazo a Cómo aplicar estilo a las casillas de verificación.

Temas relacionados

Cómo aplicar estilo a las casillas de verificación

Directrices y lista de comprobación para casillas de verificación

Compartir a través de