Questo articolo illustra lo scopo, la funzionalità e l'utilizzo della proprietà HTML DOM Input Radio 'checked' in JavaScript.
Che cos'è la proprietà 'controllata' della radio di input DOM HTML in JavaScript?
La proprietà Input Radio “checked” funziona sui moduli HTML e sui campi di input per impostare e controllare lo stato del pulsante “Radio”.
Sintassi (Imposta proprietà selezionata)
radioOggetto. controllato = VERO | falsoIn base alla sintassi di ritorno definita, la proprietà 'checked' supporta due parametri elencati di seguito:
- VERO: Rappresenta che l'elemento corrispondente è controllato.
- falso: Indica che l'elemento corrispondente è deselezionato.
Sintassi (proprietà restituita controllata)
radioOggetto. controllatoNella sintassi precedente, il ' radioOggetto ' si riferisce all'HTML ' ” elemento il cui tipo è “radio”.
Usiamo le sintassi sopra definite per spiegare l'uso della proprietà HTML DOM Input Radio 'checked' con l'aiuto di esempi pratici forniti.
Esempio 1: applicazione della proprietà Input Radio 'checked'. Utilizzo della sintassi di base
Nel primo esempio, il pulsante 'Radio' viene creato per impostare la sua proprietà 'selezionata' utilizzando la sintassi generalizzata definita.
Codice HTML
Innanzitutto, guarda il codice HTML dichiarato:
< stile del corpo = 'allineamento del testo: al centro' >
< h2 > HTML Proprietà controllata radio input DOM h2 >
Colore : < tipo di ingresso = 'Radio' id = 'giallo' > Giallo < fratello >< fratello >
< pulsante al clic = 'ColorCheck()' > Controllo 'giallo' pulsante >
< pulsante al clic = 'coloreDeseleziona()' > Deseleziona 'giallo' pulsante >
Nelle righe di codice sopra:
- IL '
Il tag ” definisce la sezione del corpo che è allineata al “ centro ”. - IL ' Il tag ” specifica il primo sottotitolo.
- IL ' Il tag ' aggiunge un pulsante 'Radio' specificando il tipo di input ' Radio ” con un ID assegnato “ giallo ”.
- IL '
Il tag ' aggiunge un semplice pulsante associato a un ' al clic ” evento per eseguire il “ controllo colore() ” funzione a cui si accederà facendo clic sul pulsante. - Allo stesso modo, un altro '
Il tag ” crea un pulsante per richiamare il “ coloreDeseleziona() ” funzione al clic del pulsante.
codice javascript
Successivamente, segui il codice JavaScript fornito:
< copione >funzione colorCheck ( ) {
documento. getElementById ( 'giallo' ) . controllato = VERO ;
}
funzione coloreDeselezionare ( ) {
documento. getElementById ( 'giallo' ) . controllato = falso ;
}
copione >
Nello snippet di codice sopra:
- La prima funzione “ controllo colore() ” utilizza il “ documento.getElementById() ” metodo per recuperare il pulsante di opzione, associare il “ controllato ” e impostarne il valore su “true”.
- D'altra parte, la funzione ' coloreDeseleziona() ” imposta il valore di “ controllato ” su “false” rispetto al pulsante Radio a cui si accede.
Produzione
Come visto, l'output controlla il pulsante 'Radio' al clic del pulsante (denominato 'Controlla') e deseleziona' al clic del pulsante ('Deseleziona').
Esempio 2: Restituzione del valore 'controllato' della radio in ingresso
Questo esempio applica la proprietà Input Radio 'checked' per restituire lo stato del pulsante 'Radio' di destinazione come valore booleano.
Codice HTML
Considera il seguente codice HTML:
< stile del corpo = 'allineamento del testo: al centro' >< h2 > HTML Proprietà controllata radio input DOM h2 >
Colore : < tipo di ingresso = 'Radio' controllato = VERO id = 'giallo' > Giallo < fratello >< fratello >
< pulsante al clic = 'ColorCheck()' > Controllo 'giallo' pulsante >
< p id = 'campione' >< P >
Nel blocco di codice sopra, il ' Radio ” viene creato e lo stato del “ controllato La proprietà 'è impostata su' VERO ”. Successivamente, analogamente, la funzione indicata viene richiamata tramite l'allegato ' al clic ” evento con il pulsante.
codice javascript
Consideriamo ora le seguenti righe di codice:
< copione >funzione colorCheck ( ) {
Dove = documento. getElementById ( 'giallo' ) . defaultChecked ;
documento. getElementById ( 'campione' ) . innerHTML = T ;
}
copione >
Nello snippet di codice sopra:
- Definire una funzione denominata ' controllo colore() ”.
- Nella sua definizione, applicare il ' documento.getElementById() ” per accedere al pulsante “Radio” utilizzando il suo id “giallo” e associare il “ defaultChecked ” per verificare il valore predefinito della “ controllato 'attributo.
- Infine, applica il ' documento.getElementById() ” nuovamente per recuperare il paragrafo vuoto incluso e visualizzare lo stato della proprietà “selezionata”.
.
Produzione
Come analizzato, il risultato restituisce lo stato del dato pulsante 'Radio', ovvero ' VERO ” al clic del pulsante.
Conclusione
In JavaScript, la proprietà HTML DOM Input Radio “checked” è utile per impostare e restituire lo stato controllato del pulsante “Radio”. La sintassi set della proprietà “checked” funziona su due valori “ VERO ' E ' falso ”. D'altra parte, la sua sintassi di ritorno non richiede alcun parametro. Questo articolo ha dimostrato l'obiettivo, la funzionalità e l'utilizzo della proprietà 'controllata' HTML DOM Input Radio in JavaScript.