Articles

Checkbox de JavaScript

Posted by admin

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() ou querySelector().
  • 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 retorno null, 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 e value ., 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ção uncheckAll()para a função onclick 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 o checkAll() função onclick 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

Leave A Comment