Come visualizzare il testo quando la casella di controllo è controllata in JavaScript?

L'opzione grafica è ora selezionata!

L'opzione della riga è controllata ora!

Qui, dichiara una funzione chiamata "checkFunction ()". Nella sua definizione, applicare la condizione su ciascuna delle caselle di controllo con l'aiuto di "controllato"Proprietà accedendo al loro ID direttamente e allo stesso modo visualizzare anche il messaggio corrispondente anche contro l'ID recuperato dei paragrafi assegnati usando il"Schermo" proprietà:

L'output corrispondente sarà:

Dall'output, si può vedere chiaramente che viene visualizzato un testo specifico quando viene selezionata una casella di controllo specifica.

Esempio 2: visualizzare il testo quando la casella di controllo viene controllata in JavaScript utilizzando la proprietà selezionata con la proprietà InnerText
Questa proprietà può essere applicata per accedere alle caselle di controllo specificate e avvisare l'utente dell'opzione segnalata nel modello Oggetto Documento (DOM).

Esempio

In primo luogo, includere allo stesso modo le seguenti caselle di intestazione e di controllo con le specifiche "id" e un "al clic"Reindirizzamento dell'evento alla casella di controllo funzione ():

Visualizza il testo quando viene controllata la casella di controllo

Pitone


Giava


JavaScript

Successivamente, definisci una funzione chiamata "checkBox ()". La seguente funzione nel passaggio seguente prenderà l'ID delle caselle di controllo specificate utilizzando "documento.getElementById ()" metodo.

Inoltre, applica un controllo su ciascuna delle caselle di controllo. Ad esempio, se viene verificata una particolare casella di controllo, il messaggio corrispondente contro ciascuna delle caselle di controllo verrà visualizzato sul DOM tramite "testo interno" proprietà:

funzione checkBox ()
get1 = documento.getElementById ("Check1")
get2 = documento.getElementById ("Check2")
get3 = documento.getElementById ("Check3")
get4 = documento.getElementById ("MSG")
Se (get1.controllato == true)
get4.InnerText = "Python Language Selected"

altro se (get2.controllato == true)
get4.InnerText = "Java Language Selected"

altro se (get3.controllato == true)
get4.InnerText = "Lingua JavaScript selezionata"

Produzione

Metodo 2: visualizzare il testo quando la casella di controllo è controllata in JavaScript usando jQuery

Questo particolare approccio può essere applicabile includendo un "jQuery"Biblioteca e applicazione dei suoi metodi.

Esempio 1: visualizzare il testo quando la casella di controllo viene controllata in javascript usando jQuery is ()
Questo metodo può essere applicato per applicare una condizione su una delle caselle di controllo e avvisare l'utente di conseguenza.

Il primo passo sarà includere il "jQuery" biblioteca:

Ora, specifica le caselle di controllo che si riferiscono a tre diverse opzioni. UN "al clic"L'evento è allegato a ciascuna delle caselle di controllo per invocare la funzione checkFunction () al controllo di una particolare casella di controllo:

Google


Linuxhint


Youtube

Infine, definisci una funzione chiamata "checkFunction ()". Qui, applica un "O (||)" condizione. Questa funzione eseguirà in modo tale che non appena viene verificata la casella di controllo specificata, una finestra di dialogo di allerta ti avviserà all'utente. Nell'altro caso, il "altro"La condizione eseguirà:

funzione checkFunction ()
if ($ ('#check1') || ('#check2') || ('#check3').è (': controllato'))
avviso ("una casella di controllo è controllata");

altro
avviso ("casella di controllo non controllata");

Produzione

Esempio 2: visualizzare il testo quando la casella di controllo è controllata in javascript utilizzando jQuery ready () e click () metodi
IL "pronto()"Il metodo specifica ciò che accade quando si verifica un evento pronto e viene caricato il modello a oggetti documenti. Il metodo "Click ()", d'altra parte, attiva la funzione da eseguire quando si verifica un evento di clic. Questi metodi possono essere implementati per fare clic sulla casella di controllo accessibile e visualizzare il testo della casella di controllo e il valore corrispondente contro di essa.

Sintassi

$ (documento).pronto (funzione)

Nella sintassi data, "funzione"Si riferisce alla funzione che è da eseguire dopo il caricamento del DOM.

$ (selettore).Fare clic su (funzione)

Qui, allo stesso modo, il "funzione"Punta alla funzione specifica da eseguire quando si verifica l'evento di clic.

Implementazione
Innanzitutto, includi la seguente libreria jQuery:

Successivamente, all'interno del ""Tag, specificare le seguenti etichette e tipi di input per ciascuna delle caselle di controllo:

Lingue di programmazione:

Pitone

JavaScript

Giava

Successivamente, crea un pulsante con il specificato "classe" E "id":

Ottenere il risultato

Ora, nell'implementazione jQuery, applicare il "pronto() "Metodo tale che quando il DOM si carica, gli ulteriori passaggi diventano funzionali. Nel passaggio successivo, applica il "clic()"Metodo e recuperare le caselle di controllo con i loro nomi specifici. IL "controllato"La proprietà qui assicurerà che la casella di controllo sia verificata e restituirà il valore e il testo corrispondenti della particolare casella di controllo utilizzando"Val ()" E "testo()"Metodi rispettivamente:

$ (documento).ready (function ()
$ ('##Outcome').Click (function ()
$ ('input [name = "risultato"]: controllato').ciascuno (function ()
Let Value = $ (questo).val ();
let text = $ ('etichetta [per = "$ value"]').testo();
console.log ('Il valore della casella di controllo è $ value');
console.log ('Il testo della casella di controllo è $ text');
)
);
);

Produzione

Questo articolo ha dimostrato i metodi che possono essere utilizzati per visualizzare il testo quando una casella di controllo è controllata in JavaScript.

Conclusione

Per visualizzare il testo quando una casella di controllo è controllata in JavaScript, applica il “controllato"Proprietà insieme al"Schermo"Proprietà per visualizzare il messaggio specificato rispetto alla casella di controllo corrispondente che verrà controllata o con il"testo interno“Proprietà per visualizzare il testo corrispondente sul DOM non appena la casella di controllo è verificata. Inoltre, puoi utilizzare l'approccio jQuery con "È()Metodo "per applicare un"O"Condizione che gestisce ciascuna delle caselle di controllo o"pronto()" E "clic()"Metodi per fare clic sulla casella di controllo recuperate non appena il DOM si carica. Questo blog ha dimostrato i metodi per visualizzare il testo quando una casella di controllo è controllata in JavaScript.