Utilizzando checkboxes è una buona opzione quando si vuole dare ai vostri visitatori la possibilità di scegliere diversi elementi da un gruppo di scelte. A questo proposito, la casella di controllo funziona di fronte a un pulsante di opzione, che consente solo di selezionare un elemento da un gruppo di scelte., Nella sua forma più semplice, una casella di controllo è semplicemente un elemento di input con il tipo di proprietà è impostata a casella, come:
<input type="checkbox">Tuttavia, come con tutti gli elementi di input, è necessario definire un nome per essere utilizzabile senza un nome, l’elemento non essere identificabili quando invio il modulo di un server per l’elaborazione. Vuoi anche impostare un valore: questo sarà il valore inviato al server se la casella di controllo è stata selezionata., Ecco un esempio:
<input type="checkbox" name="nameOfChoice" value="1">Con questo esempio, se la casella di controllo è stata selezionata e il modulo viene inviato a un server, il server sarà in grado di leggere l’elemento del modulo “nameOfChoice” e il suo valore sarà 1.
Controllato o non controllato?
Nota come tutte le caselle di controllo finora non sono state controllate dall’inizio – l’utente dovrebbe interagire con la casella di controllo per cambiare il suo stato da deselezionato a selezionato., Questo potrebbe essere quello che vuoi, ma a volte vuoi che la casella di controllo sia selezionata per impostazione predefinita, per suggerire una scelta all’utente o perché stai mostrando una casella di controllo con un valore che corrisponde a un’impostazione esistente, ad esempio da un database., Fortunatamente, questo è molto semplice – basta aggiungere l’attributo selezionato la casella di controllo:
<input type="checkbox" name="nameOfChoice" value="1" checked>Nei giorni di XHTML, dove ogni attributo deve avere sempre un valore, anche gli attributi booleani, sarebbe simile a questa:
<input type="checkbox" name="nameOfChoice" value="1" checked="checked" />in ogni modo dovrebbe funzionare in tutti i browser moderni, ma il primo modo è più breve e più “HTML5-like”.
Scelte multiple
Finora, tutte le nostre caselle di controllo sono state semplici interruttori, ad esempio per definire se un’opzione è attivata o disattivata., Le caselle di controllo sono ottime per questo, ma come detto, possono anche essere utilizzate per consentire all’utente una selezione di opzioni possibili. Lascia che ti mostri un esempio accurato in cui questo ha senso:
Nota come ora abbiamo più caselle di controllo, ma tutte condividono lo stesso nome (“favorite_pet”) ma valori diversi (ad esempio “Dogs”). Quando questo modulo viene inviato al server, tutte queste caselle di controllo saranno rappresentate da un singolo nome, ma il valore sarà un array di 0-3 elementi., Se avessi usato i pulsanti di opzione invece delle caselle di controllo, all’utente sarebbe stato permesso solo di scegliere un singolo animale preferito, ma con le caselle di controllo, possono selezionare nessuno di loro, tutti o alcuni di loro.
Etichette per caselle di controllo
Se hai testato l’esempio precedente, noterai che possiamo mettere del testo accanto a una casella di controllo, ma sono ancora due cose separate: non puoi fare clic sul testo per attivare la casella di controllo. Questo può essere davvero fastidioso per l’utente, ma fortunatamente per noi, è facile da risolvere: basta usare l’elemento label!, Ecco un esempio di base per mostrarti la differenza:
Due caselle di controllo – una senza etichetta e una con. Potrebbero sembrare quasi identici, ma quello con l’etichetta può essere attivato facendo clic sia sulla casella di controllo effettiva che sull’etichetta allegata. Questo è bello se siete seduti su un PC desktop con un mouse, ma ancora meglio quando si sta utilizzando un dispositivo touch come uno smartphone, dove piccole caselle di controllo può essere difficile da colpire con il dito.,
L’etichetta è molto semplice: usa l’attributo for per attaccarsi a un elemento form con un attributo id corrispondente (nota come ho “cani” in entrambi i punti).
Lavorare dinamicamente con una casella di controllo
Proprio come qualsiasi altro elemento DOM, si è in grado di manipolare una casella di controllo utilizzando JavaScript. A questo proposito, potrebbe essere interessante verificare se una casella di controllo è selezionata o meno e forse aggiungere qualche logica per controllare quante opzioni un utente può selezionare., Per mostrarti come questo può essere fatto, ho esteso un esempio precedente (il selettore “Favorite Pet”) per includere alcune magie JavaScript:
Permettimi di eseguire rapidamente ciò che fa questo codice. Abbiamo lo stesso modulo di prima, ma abbiamo aggiunto un gestore di eventi a ciascuna delle caselle di controllo, che fa sì che chiamino una funzione JavaScript (ValidatePetSelection) quando l’utente fa clic su di esse. In questa funzione, otteniamo una sospensione di tutte le caselle di controllo rilevanti utilizzando la funzione getElementsByName e quindi le eseguiamo in loop per vedere se sono controllate o meno – per ogni elemento selezionato, aggiungiamo a un numero., Questo numero viene quindi controllato e se supera due, avvisiamo l’utente del problema (solo due animali domestici possono essere selezionati) e quindi restituiamo false. Restituire false impedirà che la casella di controllo venga selezionata.
Questo era solo un semplice esempio di come lavorare con le caselle di controllo usando JavaScript. Puoi fare molto di più, specialmente se usi un framework JavaScript come jQuery, che renderà molto più facile selezionare e manipolare gli elementi DOM.,
Riepilogo
Le caselle di controllo consentono di impostare le opzioni selezionabili per gli utenti, sia per attivare o disattivare una singola impostazione, sia per consentire più scelte, come nell’esempio Pet preferito. È necessario utilizzare le etichette per legare la casella di controllo e il testo descrittivo insieme, per consentire all’utente di fare clic su un’area più ampia quando si manipola la casella di controllo – questo è anche un bene per assistere tecnologie come screen reader per ipovedenti.
