Como exibir o texto quando a caixa de seleção é verificada em javascript?

A opção de gráfico está verificada agora!

A opção de linha está verificada agora!

Aqui, declare uma função chamada “função de verificação ()”. Em sua definição, aplique a condição em cada uma das caixas de seleção com a ajuda do “verificado”Propriedade acessando seu ID diretamente e da mesma forma, também exibe a mensagem correspondente contra o ID buscado dos parágrafos atribuídos usando o“mostrar" propriedade:

A saída correspondente será:

A partir da saída, pode -se observar claramente que o texto específico é exibido quando uma caixa de seleção específica é selecionada.

Exemplo 2: Exibir texto quando a caixa de seleção é verificada em JavaScript usando a propriedade Checked com a propriedade InnerText
Esta propriedade pode ser aplicada para acessar as caixas de seleção especificadas e notificar o usuário da opção verificada no Modelo de Objeto do Documento (DOM).

Exemplo

Em primeiro lugar, inclua da mesma forma as seguintes caixas de título e de seleção com o especificado “eu ia" e um "ONCLICK”Evento redirecionando para a caixa de seleção da função ():

Exibir texto quando a caixa de seleção é verificada

Pitão


Java


JavaScript

Depois disso, defina uma função chamada “Caixa de seleção ()”. A função a seguir na etapa abaixo buscará o ID das caixas de seleção especificadas usando o “documento.getElementById ()”Método.

Além disso, aplique um cheque em cada uma das caixas de seleção. Por exemplo, se uma determinada caixa de seleção for verificada, a mensagem correspondente em cada uma das caixas de seleção será exibida no DOM através do “InnerText" propriedade:

Função de seleção ()
get1 = documento.getElementById ("check1")
get2 = documento.getElementById ("check2")
get3 = documento.getElementById ("check3")
get4 = documento.getElementById ("msg")
if (get1.verificado == true)
get4.InnerText = "Linguagem Python selecionada"

caso contrário, se (get2.verificado == true)
get4.INNERTEXT = "Idioma Java selecionado"

caso contrário, se (get3.verificado == true)
get4.INNERTEXT = "Linguagem JavaScript selecionada"

Saída

Método 2: Exiba o texto quando a caixa de seleção é verificada em javascript usando jQuery

Esta abordagem em particular pode ser aplicável incluindo um “jQueryBiblioteca e aplicação de seus métodos.

Exemplo 1: Exibir o texto quando a caixa de seleção é verificada no JavaScript usando o método jQuery is ()
Este método pode ser aplicado para aplicar uma condição em qualquer uma das caixas de seleção e notificar o usuário de acordo.

O primeiro passo será incluir o “jQuery" biblioteca:

Agora, especifique as caixas de seleção que se referem a três opções diferentes. Um "ONCLICK”O evento está anexado a cada uma das caixas de seleção para invocar a função de verificação () ao verificar uma caixa de seleção específica:

Google


Linuxhint


YouTube

Finalmente, defina uma função chamada “função de verificação ()”. Aqui, aplique um “Ou (||)" doença. Esta função será executada de tal maneira que, assim que a caixa de seleção especificada for verificada, uma caixa de diálogo alerta notificará o usuário sobre isso. No outro caso, o “outro“Condição será executada:

Função de verificação ()
if ($ ('#check1') || ('#check2') || ('#check3').está checado'))
alerta ("uma caixa de seleção está marcada");

outro
alerta ("Caixa de seleção não verificada");

Saída

Exemplo 2: Exibir o texto quando a caixa de seleção é verificada em JavaScript usando os métodos JQuery Ready () e Click ()
O "preparar()”O método especifica o que acontece quando ocorre um evento pronto e o modelo de objeto de documento é carregado. O método "click ()", por outro lado, desencadeia a função a ser executada quando um evento de clique ocorre. Esses métodos podem ser implementados para clicar na caixa de seleção acessada e exibir o texto da caixa de seleção e o valor correspondente contra ele.

Sintaxe

$ (documento).pronto (função)

Na sintaxe dada, “função”Refere -se à função que deve ser executada após o carregamento do DOM.

$ (seletor).Clique (função)

Aqui, da mesma forma, o “função”Aponta para a função específica para executar quando o evento de cliques ocorre.

Implementação
Primeiro, inclua a seguinte biblioteca jQuery:

Em seguida, dentro do “”Tag, especifique os seguintes rótulos e tipos de entrada para cada uma das caixas de seleção:

Linguagens de programação:

Pitão

JavaScript

Java

Depois disso, crie um botão com o especificado “aula" e "eu ia”:

Obter resultado

Agora, na implementação do jQuery, aplique o “preparar() ”Método de modo que quando o DOM carrega, as etapas adicionais se tornam funcionais. Na próxima etapa, aplique o “clique()”Método e busque as caixas de seleção por seus nomes específicos. O "verificado”A propriedade aqui garantirá que a caixa de seleção seja verificada e retorne o valor e o texto correspondentes da caixa de seleção específica usando o“val ()" e "texto()”Métodos respectivamente:

$ (documento).pronto (function ()
$ ('#resultado').clique (function ()
$ ('entrada [name = "resultado"]: verificado').cada (function ()
Deixe o valor = $ (isso).val ();
Deixe o texto = $ ('Label [for = "$ value"]').texto();
console.log ('O valor da caixa de seleção é $ value');
console.log ('O texto da caixa de seleção é $ text');
)
);
);

Saída

Esta redação demonstrou os métodos que podem ser utilizados para exibir o texto quando uma caixa de seleção é verificada em JavaScript.

Conclusão

Para exibir o texto quando uma caixa de seleção é verificada em javascript, aplique o “verificado”Propriedade junto com a“mostrar”Propriedade para exibir a mensagem especificada contra a caixa de seleção correspondente que será verificada ou com o“InnerText“Propriedade para exibir o texto correspondente no DOM assim que a caixa de seleção for verificada. Além disso, você pode utilizar a abordagem jQuery com o “é()”Método para aplicar um“OU”Manipulação de condições de cada uma das caixas de seleção ou“preparar()" e "clique()”Métodos para clicar na caixa de seleção buscada assim que o DOM carregar. Este blog demonstrou os métodos para exibir o texto quando uma caixa de seleção é verificada em javascript.