Resumo: neste tutorial, você vai aprender a usar JavaScript para verificar se uma checkbox está assinalada, para obter os valores das checkboxes selecionadas e selecionar / deseleccionar todas as checkboxes.
Verificar se uma caixa de seleção é marcada
Para obter o estado de uma caixa de seleção, seja marcado ou desmarcado, siga estes passos:
- Primeiro, selecione a caixa de verificação utilizar a seleção de métodos do DOM como o
getElementById()
ouquerySelector()
. - então, acesse o
checked
propriedade do elemento checkbox., Se a sua propriedadechecked
étrue
, então a opção está assinalada; caso contrário, não está.,boi é verificado, você pode usar o código a seguir:Code language: JavaScript (javascript)Além disso, você pode usar o
querySelector()
para verificar se o:checked
seletor de não retornonull
, assim:Code language: JavaScript (javascript)Se uma caixa de seleção não tem o
value
atributo, seu valor padrão é'on'
:Code language: HTML, XML (xml)Se você obter o
value
atributo de uma caixa de seleção, você sempre terá o'on'
string se a caixa de seleção estiver marcada ou não., Por exemplo:Code language: JavaScript (javascript)Veja o exemplo a seguir:
a Obtenção de valores de múltiplas selecionadas caixas de seleção
Supondo que você tenha três caixas de seleção e você deseja obter os valores de todos os caixas de seleção:
Code language: HTML, XML (xml)Para fazer isso, você precisa adicionar mais dois atributos de HTML para cada caixa de seleção:
name
evalue
., Todas as três caixas de seleção precisam ter o mesmo nome, mas com valores distintos, por exemplo:Para seleccionar as caixas de verificação seleccionadas, você pode usar o
querySelector()
método:Code language: JavaScript (javascript)E recolher o valor de cada caixa de seleção:
Code language: JavaScript (javascript)Colocá-lo todos juntos:
checkboxes.js
arquivo:marcar / Desmarcar todas as caixas de seleção
às Vezes, você pode querer marcar e desmarcar todas as caixas de seleção em um formulário., Veja o seguinte exemplo:
Quando carregar no botão com o id
btn
, todas as opções serão assinaladas se não estiverem, e desligadas se já estiverem assinaladas.primeiro, desenvolva uma função
check()
que verifique ou desligue todas as opções com base num argumento de entrada:Quando carregar no botão, poderá invocar a função
check()
para seleccionar todas as opções. Da próxima vez, quando você clicar no botão, ele deve desligar todas as checkboxes.,para fazer esta opção, terá de Atribuir de novo ao controlador de eventos sempre que o botão disparar.
A seguir, escolha o botão e anexar a um clique de ouvinte de evento:
Code language: JavaScript (javascript)checkAll()
função é o seguinte:Code language: JavaScript (javascript)uncheckAll()
função é:Como funciona:
Se você clicar no botão, o
uncheck()
função é invocada para verificar todas as caixas de verificação. Então, ele recoloca a funçãouncheckAll()
para a funçãoonclick
manipulador de eventos.,da Próxima vez, se você clicar no botão, o
uncheckAll()
função é invocada para desmarcar todas as caixas de verificação e reatribuir ocheckAll()
funçãoonclick
manipulador de eventos.Resumo
- usar
checkbox.checked
propriedade ou:check
seletor para determinar se uma caixa de seleção está marcada. - Query the
value
attribute to get the value of a checkbox.
- este tutorial foi útil ?
- YesNo
- usar