Démarrage rapide : ajout de contrôles de case à cocher (HTML)

[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Apprenez à créer des contrôles d’objet checkbox. Utilisez des cases à cocher pour proposer aux utilisateurs un choix binaire, une ou plusieurs options qui ne qui s’excluent pas mutuellement ou un choix mixte.

Prérequis

• Démarrage rapide : ajout de contrôles HTML et gestion des événements

Créer une case à cocher

Pour créer un contrôle checkbox, vous créez un élément input et définissez son attribut type sur "checkbox". Vous ajoutez votre texte pour le contrôle checkbox après la balise de fermeture de l’élément input.

Astuce  Lorsque vous ajoutez un contrôle checkbox, insérez-le dans un élément label pour augmenter la taille de la zone qui répond aux interactions de l’utilisateur. Ainsi, l’utilisation de la case à cocher est plus simple sur les appareils tactiles.

 

Par défaut, une case à cocher est vide, ou désactivée, jusqu’à ce que l’utilisateur clique dessus. Pour qu’un contrôle checkbox soit sélectionné ou activé dès le départ, utilisez l’attribut checked. Cet exemple permet de créer quatre contrôles de case à cocher et utilise l’attribut checked pour que le deuxième soit activé.

.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>

Lorsque vous exécutez le code, les options 1, 3 et 4 sont désactivées, tandis que l’option 2 est activée.

Déterminer si une case à cocher est activée

Le contrôle checkbox prend en charge les mêmes événements que les autres éléments input, notamment l’événement click. Toutefois, le contrôle checkbox est destiné aux informations d’état et ne déclenche généralement pas d’action (à l’exception d’une case à cocher indéterminée, décrite dans la section suivante). Au lieu de gérer l’événement click de la case à cocher et d’effectuer immédiatement une action en fonction de l’état checked de la case à cocher, en général, vous lisez l’état checkbox lorsque l’utilisateur clique sur un bouton de « soumission » pour valider un ensemble d’options. (Si vous voulez effectuer une action, utilisez plutôt un contrôle ToggleSwitch.)

Pour déterminer si une case à cocher est activée, utilisez sa propriété checked. Cet exemple crée un contrôle button qui affiche les valeurs checked des contrôles de case à cocher créés dans l’exemple précédent.

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

Voici ce à quoi il ressemble lorsque vous exécutez le code et cliquez sur le bouton :

Créer une case à cocher indéterminée

Lorsqu’une option s’applique à plusieurs objets, vous pouvez utiliser une case à cocher pour indiquer si elle concerne la totalité, une partie ou aucun de ces objets. Si l’option s’applique à quelques objets seulement, et non à la totalité, optez pour l’état indeterminate de la case à cocher afin d’indiquer un choix mixte.

Vous pouvez définir la propriété indeterminate uniquement en JavaScript—il n’existe pas d’attribut "indéterminé" que vous pouvez définir en HTML.

Remarque  La modification de la propriété indeterminate d’une case à cocher ne modifier pas automatiquement sa valeur checked.

 

Cet exemple crée une case à cocher "Sélectionner tout" qui permet d’activer ou de désactiver un ensemble de contrôles de case à cocher enfants (options 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>

Voici ce à quoi ressemblent les contrôles de case à cocher :

L’exemple gère l’événement click de la case à cocher selectAll afin qu’un clic déclenche la fonction checkAll.

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

La fonction checkAll active ou désactive tous les autres contrôles de case à cocher lorsque vous activez ou désactivez la case à cocher selectAll.

function checkAll(eventInfo) {

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

La fonction updateCheckboxes est appelée lorsqu’un clic est effectué sur l’un des contrôles de case à cocher enfants.

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

Elle détermine l’état d’activation de chaque case à cocher et met à jour la case à cocher selectAll.

• Si chaque case à cocher enfant est activée, elle définit l’état indeterminate de la case à cocher selectAll sur false et sa valeur checked sur true.
• Si chaque case à cocher enfant est désactivée, elle définit l’état indeterminate de la case à cocher selectAll sur false et sa valeur checked sur false.
• Si certains contrôles de case à cocher enfants sont activés et d’autres désactivés, elle définit l’état indeterminate de la case à cocher selectAll sur true et sa valeur checked sur 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;
    }
}

La partie suivante de l’exemple utilise WinJS.Namespace.define pour rendre checkAll et updateCheckboxes publics.

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

Il existe une dernière chose à faire ici. La deuxième option démarre dans l’état checked :

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

La case à cocher selectAll démarre dans l’état vide ou désactivé, et la méthode updateCheckboxes n’est pas appelée tant que l’utilisateur ne clique pas sur une case à cocher. Par conséquent, lorsque l’exemple de code s’exécute, la case à cocher selectAll est désactivée alors qu’elle devrait se trouver dans l’état indéterminé :

Pour résoudre le problème, ajoutez un appel à updateCheckboxes lorsque la page se charge.

• Si votre code est dans un objet PageControl, utilisez la méthode ready pour appeler updateCheckboxes.
• Si votre code est dans le fichier default.js de votre application, utilisez le gestionnaire d’événements activated pour appeler updateCheckboxes.
• Dans les deux cas, vous pouvez également gérer l’événement DOMContentLoaded et utiliser le gestionnaire pour appeler updateCheckboxes.

Cet exemple utilise un objet PageControl, donc il appelle updateCheckboxes à partir de la méthode 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.
    }
});

Récapitulatif et étapes suivantes

Vous avez appris à créer des contrôles checkbox, à déterminer leur état et à utiliser la propriété indeterminate pour indiquer un état intermédiaire.

Pour continuer, examinez Comment appliquer un style aux contrôles de case à cocher.

Rubriques associées

Comment appliquer un style aux contrôles de case à cocher

Recommandations et liste de vérification pour les contrôles de case à cocher