jQuery è un framework Javascript che può semplificare la codifica Javascript per un sito Web e rimuove molti problemi di compatibilità tra browser. Ieri ho esaminato come ottenere e impostare i valori degli elementi del modulo con jQuery ma non ho gestito le caselle di controllo. Il post di oggi esamina come sapere se una casella di controllo del modulo HTML è selezionata o non selezionata con jQuery e quindi come modificarla per essere deselezionata.
Modulo di esempio
Il nostro modulo di esempio è simile a questo:
<input type="checkbox" name="foo" value="bar" /><input type="button" onclick="show_checked()" value="Show" /><input type="button" onclick="set_checked(true)" value="On" /><input type="button" onclick="set_checked(false)" value="Off" />
C’è una casella di controllo con il nome ” foo ” e poi tre pulsanti. Il primo chiama una funzioneper mostrarci se la casella di controllo è selezionata o meno, e i secondi due la cambiano da controllata a non controllata.
Controlla se la casella di controllo è selezionata
Ci sono diversi modi per capire se una casella di controllo è selezionata o meno con jQuery, e qui un paio di alternative. Ognuno restituirà true se è controllato o false se non lo è.
$('input').is(':checked')$('input').attr('checked')
Impostare la casella di controllo per controllato o non controllato
Lo stato della casella di controllo può essere modificato utilizzando il attr() funzione come, per controllare la casella di:
$('input').attr('checked', true);
così come per deselezionare la casella:
$('input').attr('checked', false);
esempio
E, infine, ecco l’esempio di modulo in azione:
Una nota sui valori booleani
C’è una discussione nei commenti qui sotto sui problemi riscontrati con Chromium che possono essere correlati ai valori di stringa di true e false passati mentre deve essere rigorosamente un vero booleano o falso altrimenti possono accadere conseguenze inaspettate.
È stato suggerito di utilizzare .removeAttr () invece, ma questo può avere altre conseguenze dalla mia lettura dei commenti sulla pagina di documentazione di jQuery per la funzione. Seguirò questo post in un secondo momento e farò più test per confermare di sicuro
Attivando una casella di controllo quando si fa clic su un’etichetta
Si noti che Javascript non è necessario per attivare una casella di controllo quando si fa clic su un testo; questo è ciò che HTML <label> s sono per. Leggi il mio post di follow-up usando HTML < label> per attivare e selezionare i campi per ulteriori informazioni.