Guida introduttiva: Aggiunta di controlli casella di controllo (HTML)

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Impara a creare controlli checkbox. Usa le caselle di controllo per presentare agli utenti una scelta tra due possibilità, una o più opzioni che non si escludono a vicenda o una scelta multipla.

Prerequisiti

• Guida introduttiva: Aggiunta di controlli HTML e gestione di eventi

Creare una casella di controllo

Per creare un controllo checkbox, devi creare un elemento input e impostare l'attributo type su "checkbox". Aggiungi quindi il testo per il controllo checkbox dopo il tag di chiusura dell'elemento input.

Suggerimento  Quando aggiungi un controllo checkbox, racchiudilo in un elemento label per aumentare le dimensioni dell'area che risponde all'interazione dell'utente. In questo modo sarà più facile usare la casella di controllo nei dispositivi di tocco.

 

Per impostazione predefinita, una casella di controllo è deselezionata finché un utente non fa clic su di essa. Per impostare un controllo checkbox come selezionato fin dall'inizio, usa l'attributo checked. Questo esempio crea quattro controlli casella di controllo e usa l'attributo checked per impostare il secondo come selezionato.

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

Quando esegui il codice, le opzioni 1, 3 e 4 appaiono deselezionate, mentre l'opzione 2 è selezionata.

Determinare se una casella di controllo è selezionata

Il controllo checkbox supporta gli stessi eventi di altri elementi input, incluso l'evento click. Tuttavia, il controllo checkbox è riservato alla visualizzazione di informazioni sullo stato e in genere non attiva un'azione (fatta eccezione per il caso delle caselle di controllo con stato indeterminato, di cui parleremo nella prossima sezione). Solitamente, invece di gestire l'evento click della casella di controllo ed eseguire immediatamente un'azione in base allo stato checked della casella di controllo, si legge lo stato del controllo checkbox quando l'utente fa clic su una sorta di pulsante di invio per eseguire il commit di un set di opzioni. Se vuoi eseguire un'azione, usa piuttosto un controllo ToggleSwitch.

Per determinare se una casella di controllo è selezionata, usa la sua proprietà checked. Questo esempio crea un controllo button che visualizza i valori checked dei controlli casella di controllo creati nell'esempio precedente.

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

Ecco cosa accade quando esegui il codice e fai clic sul pulsante:

Creare una casella di controllo con stato indeterminato

Quando un'opzione si applica a più di un oggetto, puoi usare una casella di controllo per indicare se l'opzione si applica a tutti, ad alcuni o a nessuno di questi oggetti. Se l'opzione è applicabile ad alcuni oggetti, ma non a tutti, usa lo stato indeterminate della casella di controllo per rappresentare una scelta mista.

Puoi impostare la proprietà indeterminate solo in JavaScript—non esiste un attributo "indeterminate" che può essere impostato in HTML.

Nota  La modifica della proprietà indeterminate di una casella di controllo non ne cambia automaticamente il valore checked.

 

Questo esempio crea una casella di controllo "Select all" che seleziona o deseleziona un set di controlli casella di controllo figlio (opzioni 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>

Ecco come appaiono i controlli casella di controllo:

L'esempio gestisce l'evento click della casella di controllo selectAll in modo che facendo clic su di essa venga attivata la funzione checkAll.

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

La funzione checkAll seleziona o deseleziona tutti gli altri controlli casella di controllo quando si seleziona o deseleziona la casella di controllo selectAll.

function checkAll(eventInfo) {

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

La funzione updateCheckboxes viene chiamata quando si fa clic su uno qualsiasi dei controlli casella di controllo figlio.

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

Rileva lo stato selezionato di ogni casella di controllo e aggiorna la casella di controllo selectAll.

• Se ogni casella di controllo figlio è selezionata, imposta lo stato indeterminate della casella di controllo selectAll su false e il suo valore checked su true.
• Se ogni casella di controllo figlio è deselezionata, imposta lo stato indeterminate della casella di controllo selectAll su false e il suo valore checked su false.
• Se alcuni controlli casella di controllo figlio sono selezionati e altri sono deselezionati, imposta lo stato indeterminate della casella di controllo selectAll su true e il suo valore checked su 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 parte successiva dell'esempio usa WinJS.Namespace.define per impostare checkAll e updateCheckboxes come pubblici.

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

C'è ancora un'altra cosa da fare qui. La seconda opzione è fin da subito nello stato checked:

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

La casella di controllo selectAll è invece nello stato deselezionato e il metodo updateCheckboxes non viene chiamato finché l'utente non fa clic su una casella di controllo. Di conseguenza, quando il codice dell'esempio viene eseguito, la casella di controllo selectAll risulta deselezionata quando dovrebbe essere invece nello stato indeterminato:

Per risolvere il problema, aggiungi una chiamata a updateCheckboxes quando viene caricata la pagina.

• Se il codice è in un PageControl, usa il metodo ready per chiamare updateCheckboxes.
• Se il codice è nel file default.js dell'app, usa il gestore dell'evento activated per chiamare updateCheckboxes.
• In entrambi i casi puoi anche gestire l'evento DOMContentLoaded e usare il gestore per chiamare updateCheckboxes.

Questo esempio usa un PageControl, pertanto chiama updateCheckboxes dal metodo 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.
    }
});

Riepilogo e passaggi successivi

Hai imparato come creare controlli checkbox, come determinarne lo stato e come usare la proprietà indeterminate per indicare uno stato intermedio.

Come prossimo passo, vedi Come applicare stili ai controlli casella di controllo.

Argomenti correlati

Come applicare stili ai controlli casella di controllo

Linee guida ed elenco di controllo per i controlli casella di controllo