Este artigo descreverá o procedimento para marcar e desmarcar a caixa de seleção usando JavaScript.
Como marcar/desmarcar a caixa de seleção usando JavaScript?
Para marcar ou desmarcar as caixas de seleção em JavaScript, use o botão “ verificado ” atributo. Primeiro, obtenha a referência do elemento HTML “ caixa de seleção ” com a ajuda de seu “ Eu iria ” usando o “ getElementById() ” método e, em seguida, aplique o método “ verificado ” em seu valor.
Exemplo 1: Marque/desmarque a caixa de seleção única
Primeiro, crie um arquivo HTML, com as seguintes linhas de código:
< h3 > Clique nos botões para marcar ou desmarcar a caixa de seleção h3 >
< tipo de entrada = 'caixa de seleção' Eu iria = 'caixa de seleção' > Concordo com os termos e condições < br >< br >
< tipo de botão = 'botão' ao clicar = 'Verifica()' > Sim botão >
< tipo de botão = 'botão' ao clicar = 'desmarcar ()' > Não botã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 marcar ou desmarcar a caixa de seleção que acionará a função “ Verifica() ' e ' desmarcar () ” respectivamente no evento click.
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 marcar a caixa de seleção, use as linhas de código abaixo:
função Verifica ( ) {
deixe entrar = documento. getElementById ( 'caixa de seleção' ) ;
entrada. verificado = verdadeiro ;
}
No código acima:
- Defina uma função “ Verifica() ” que acionará o clique do botão para marcar a caixa de seleção.
- Dentro do corpo da função, pegue a referência do checkbox usando seu id “ caixa de seleção ” com a ajuda do “ getElementById() ” método e armazená-lo em uma variável “ entrada ”.
- Marque a caixa de seleção definindo o “ verificado ' propriedade ' verdadeiro ”.
Para desmarcar a caixa de seleção clicando no botão “ Não ” botão, use o código abaixo dado:
função desmarcar ( ) {deixe entrar = documento. getElementById ( 'caixa de seleção' ) ;
entrada. verificado = falso ;
}
O trecho de código acima:
- Defina uma função “ desmarcar () ” que acionará o clique do botão para desmarcar a caixa de seleção.
- Dentro do corpo da função, pegue a referência do checkbox usando seu id “ caixa de seleção ” com a ajuda do “ getElementById() ” método e armazená-lo em uma variável “ entrada ”.
- Desmarque a caixa de seleção configurando a opçã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 “ window.onload ” evento:
janela. carregando = função ( ) {janela. addEventListener ( 'carregar' , Verifica , falso ) ;
}
Resultado
A saída significa que a caixa de seleção foi marcada e desmarcada com sucesso ao clicar nos botões.
Exemplo 2: Marcar/Desmarcar Várias Caixas de Seleção
Vejamos um exemplo de como marcar 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 ” que alternará a caixa de seleção para marcar ou desmarcar:
< h3 > Clique no botão para marcar ou desmarcar todas as caixas de seleção h3 >< tipo de entrada = 'caixa de seleção' classe = 'caixa de seleção' > Marque ou desmarque-me < br >
< tipo de entrada = 'caixa de seleção' classe = 'caixa de seleção' > Marque ou desmarque-me < br >
< tipo de entrada = 'caixa de seleção' classe = 'caixa de seleção' > Marque ou desmarque-me < br >
< tipo de entrada = 'caixa de seleção' classe = 'caixa de seleção' > Marque ou desmarque-me < br >
< tipo de entrada = 'caixa de seleção' classe = 'caixa de seleção' > Marque ou desmarque-me < br >< br >
< tipo de entrada = 'botão' Eu iria = 'alternar' valor = 'Clique para alternar as caixas de seleção' >
A saída correspondente será:
Depois disso, em um arquivo JavaScript ou tag