Como verificar/desmarcar a caixa de seleção usando JavaScript

A caixa de seleção é um tipo de elemento de entrada HTML que permite ao usuário selecionar uma das várias opções. Às vezes, pode haver uma situação em que as caixas de seleção precisam ser verificadas ou desmarcadas no caso de preencher um questionário, questionário ou alguns aplicativos que precisam verificar qualquer determinada ou todas as permissões simultaneamente para prosseguir.

Este artigo descreverá o procedimento para verificar e desmarcar a caixa de seleção usando JavaScript.

Como verificar/desmarcar a caixa de seleção usando JavaScript?

Para verificar ou desmarcar as caixas de seleção em JavaScript, use o “verificado”Atributo. Primeiro, obtenha a referência do elemento html “Caixa de seleção”Com a ajuda de seu designado“eu ia”Usando o“getElementById ()”Método e, em seguida, aplique o“verificado”Propriedade em seu valor.

Exemplo 1: Verifique/desmarque a única caixa de seleção
Primeiro, crie um arquivo HTML, com as seguintes linhas de código:

Clique em botões para verificar ou desmarcar a caixa de seleção

Concordo com os termos e condição


Sim
Não

No código acima:

• Crie uma caixa de seleção, com o ID “Caixa de seleção”Que será usado para acessar o elemento“Caixa de seleção”Para executar ações.
• Crie dois botões, “Sim" e "Não”, Para verificar ou desmarcar a caixa de seleção que acionará a função“verificar()" e "não -convoque ()”Respectivamente no evento de clique.

Depois de executar o código acima, a saída será assim:

Em seguida, defina as funções para executar ações na caixa de seleção no arquivo javascript ou na tag. Para verificar a caixa de seleção, use as linhas de código abaixo:

função check ()
Deixe input = documento.getElementById ('Caixa de seleção');
entrada.verificado = true;

No código acima:

• Defina uma função “verificar()”Isso acionará o botão Clique para verificar a caixa de seleção.
• Dentro do corpo da função, obtenha a referência da caixa de seleção usando seu ID “Caixa de seleção”Com a ajuda do“getElementById ()”Método e armazene -o em uma variável“entrada”.
• Verifique a caixa de seleção configurando o “verificado" propriedade "verdadeiro”.

Para desmarcar a caixa de seleção clicando no “Não”Botão, use o código abaixo:

function unseck ()
Deixe input = documento.getElementById ('Caixa de seleção');
entrada.verificado = false;

O trecho de código acima:

• Defina uma função “não -convoque ()”Isso acionará o botão Clique para desmarcar a caixa de seleção.
• Dentro do corpo da função, obtenha a referência da caixa de seleção usando seu ID “Caixa de seleção”Com a ajuda do“getElementById ()”Método e armazene -o em uma variável“entrada”.
• Desmarque a caixa de seleção configurando o “verificado" propriedade "falso”.

Por fim, defina uma função para desmarcar a caixa de seleção por padrão no carregamento da página usando o “janela.carregandoEvento:

janela.OnLoad = function ()
janela.addEventListener ('carregamento', check, false);

Saída

A saída significa que a caixa de seleção é verificada e desmarcada com sucesso enquanto clica nos botões.

Exemplo 2: Verifique/desmarque várias caixas de seleção
Vamos ver um exemplo de como verificar ou desmarcar todas as caixas de seleção ao mesmo tempo.

Primeiro, crie um arquivo HTML e, em seguida, crie várias caixas de seleção e um botão com o ID “alternar”Isso alternará a caixa de seleção para verificar ou desmarcar:

Clique no botão para verificar ou desmarcar todas as caixas de seleção

Verifique ou desmarque -me

Verifique ou desmarque -me

Verifique ou desmarque -me

Verifique ou desmarque -me

Verifique ou desmarque -me

A saída correspondente será:

Depois disso, em um arquivo ou tag javascript, adicione o código abaixo para verificar ou desmarcar a lista de caixas de seleção com um único clique. Primeiro, obtenha a referência do botão usando seu ID "alterne" e armazene -o em um "botão" variável e, em seguida, anexe um evento OnClick e invoque uma função "CheckAllBoxes”Isso verificará a lista de caixas de seleção e depois chama a próxima função“UNLECKLALALBOLES”:

var Button = documento.getElementById ("alternância");
botão.OnClick = CheckAllBoxes;

Para verificar as caixas de seleção, use o código abaixo do ritmo

função checkAllBoxes ()
var input = documento.QuerySelectorAll ('.caixa de seleção ');
para (var i = 0; i < input.length; i++)
entrada [i].verificado = true;

esse.ONCLICK = UNLECKLALALBOLES;

Neste código acima:

• Primeiro, defina uma função “CheckAllBoxes ()”Isso acionará o botão Clique para verificar todas as caixas de seleção.
• Dentro do corpo da função, obtenha as referências de todas as caixas de seleção usando suas classes designadas “Caixa de seleção”Com a ajuda do“QuerySelectorAll ()”Método e armazene -o em uma variável“entrada”.
• Itera as caixas de seleção e defina o “verificado" propriedade "verdadeiro”Para verificar todas as caixas de seleção.
• Depois de verificar todas as caixas de seleção, chame a outra função “UNLECKLALALBOLES”No evento de clique para alternar o botão.

Para desmarcar a lista da caixa de seleção clicando no botão, use as linhas de código abaixo:

function unaleckallBoxes ()
var input = documento.QuerySelectorAll ('.caixa de seleção ');
para (var i = 0; i < input.length; i++)
entrada [i].verificado = false;

esse.OnClick = CheckAllBoxes;

Neste snippet de código acima:

• Defina uma função “UNLECKLALALBOLES ()”Isso acionará o botão Clique para desmarcar todas as caixas de seleção.
• Dentro do corpo da função, obtenha as referências de todas as caixas de seleção usando suas classes designadas “Caixa de seleção”Com a ajuda do“QuerySelectorAll ()”Método e armazene -o em uma variável“entrada”.
• Itera as caixas de seleção e defina o “verificado" propriedade "falso”Para desmarcar todas as caixas de seleção.
• Depois disso, chame a outra função “CheckAllBoxes”No evento de clique para alternar o botão.

Saída

A saída indica que a lista de caixas de seleção é verificada ou desmarcada com sucesso com um único botão.

Conclusão

Para verificar ou desmarcar as caixas de seleção, use o “verificado" propriedade. Depois de obter a referência do elemento “Caixa de seleção”Usando seu“eu ia”Com a ajuda do“getElementById ()”Método, verifique a caixa de seleção definindo o“verificado" atribuir a "verdadeiro”. Da mesma forma, defina o “verificado" atribuir a "falso”Para desmarcar a caixa de seleção. Este artigo descreve o procedimento para verificar e desmarcar a caixa de seleção usando JavaScript.