Usando checkboxes é uma boa opção quando você deseja dar aos seus visitantes a opção de escolher vários itens de um grupo de opções. Nesse sentido, a opção funciona ao contrário de um botão de rádio, que só lhe permite selecionar um item de um grupo de opções., Na sua forma mais simples, uma caixa de seleção é simplesmente um elemento input com o tipo de conjunto de propriedades a caixa de seleção, como este:
<input type="checkbox">no Entanto, como com todos os elementos de entrada, você precisa definir um nome para ele, para ser utilizável, sem um nome, o elemento não ser identificável quando postar o formulário de volta para um servidor para processamento. Também deseja definir um valor – este será o valor enviado para o servidor se a opção tiver sido assinalada., Aqui está um exemplo:
<input type="checkbox" name="nameOfChoice" value="1">Com este exemplo, se a caixa de seleção tem sido verificados e o formulário é enviado a um servidor, o servidor será capaz de ler o elemento de formulário “nameOfChoice” e o seu valor será 1.
verificado ou não verificado?
repare como todas as opções até agora não foram assinaladas desde o início – o utilizador teria de interagir com a opção para mudar o seu estado de opção para opção assinalada., Isto pode ser o que você quer, mas às vezes, você quer que a checkbox seja verificada por padrão, seja para sugerir uma escolha para o usuário ou porque você está mostrando uma checkbox com um valor que corresponde a uma configuração existente, por exemplo, a partir de uma base de dados., Felizmente, isso é muito simples – basta adicionar o atributo seleccionado a caixa de verificação:
<input type="checkbox" name="nameOfChoice" value="1" checked>Nos velhos tempos de XHTML, onde cada atributo deve ter um valor, mesmo os atributos booleanos, ele ficaria assim:
<input type="checkbox" name="nameOfChoice" value="1" checked="checked" />de Qualquer forma deve funcionar em todos os navegadores modernos, mas o primeiro caminho é mais curto e mais “HTML5-like”.
múltiplas opções
até agora, todas as nossas caixas de cheques têm sido interruptores simples, por exemplo, para definir se uma opção está ligada ou desligada., Checkboxes são ótimos para isso, mas como mencionado, eles também podem ser usados para permitir ao usuário uma seleção de opções possíveis. Deixe-me mostrar-lhe um bom exemplo de onde isso faz sentido:
Observe como agora temos várias caixas de seleção, mas todos eles compartilham o mesmo nome (“favorite_pet”), mas valores diferentes (por exemplo, “Cães”). Quando este formulário é enviado de volta para o servidor, todas estas checkboxes serão representadas por um único nome, mas o valor será uma array de 0-3 itens., Se você tivesse usado botões de rádio em vez de checkboxes, o Usuário só teria permissão para escolher um único animal favorito, mas com checkboxes, eles podem selecionar nenhum deles, todos eles ou alguns deles.
Etiquetas para caixas de seleção
Se você testou o exemplo anterior, você vai notar que podemos colocar o texto ao lado de uma caixa de seleção, mas eles ainda são duas coisas separadas – você não pode clicar no texto para acionar a caixa de seleção. Isso pode ser muito irritante para o usuário, mas felizmente para nós, é fácil de resolver: basta usar o elemento de etiqueta!, Aqui está um exemplo básico para mostrar a diferença:
duas checkboxes – uma sem etiqueta e outra com. Eles podem parecer quase idênticos, mas o que tem a etiqueta pode ser despoletado clicando tanto na caixa de checkbox real e na etiqueta anexada. Isto é bom se você estiver sentado em um PC desktop com um mouse, mas ainda melhor quando você está usando um dispositivo de toque como um smartphone, onde pequenas caixas de cheques podem ser difíceis de bater com o dedo.,
O rótulo é muito simples-ele usa o atributo for para se anexar a um elemento form com um atributo ID correspondente (observe como eu tenho “dogs” em ambos os lugares).
trabalhando dinamicamente com uma checkbox
assim como qualquer outro elemento DOM, você é capaz de manipular uma checkbox usando JavaScript. A esse respeito, poderia ser interessante verificar se uma checkbox está assinalada ou não e talvez adicionar alguma lógica para controlar quantas opções um usuário pode selecionar., Para mostrar como isso pode ser feito, eu estendi um exemplo anterior (o seletor “Pet favorito”) para incluir alguma magia JavaScript:
permite-me executar rapidamente o que este código faz. Nós temos a mesma forma que antes, mas nós adicionamos um controlador de eventos para cada uma das checkboxes, o que faz com que eles chamem uma função JavaScript (ValidatePetSelection) quando o usuário os clica. Nesta função, nós obtemos uma posse de todas as checkboxes relevantes usando a função getElementsByName e, em seguida, fazemos um loop através deles para ver se eles são verificados ou não – para cada item verificado, adicionamos a um número., Este número é então verificado e se exceder dois, então Alertamos o usuário sobre o problema (apenas dois animais de estimação podem ser selecionados) e, em seguida, retornamos falso. A devolução do false impedirá que a opção seja assinalada.
Este foi apenas um exemplo simples de como trabalhar com checkboxes usando JavaScript. Você pode fazer muito mais, especialmente se você usar um framework JavaScript como o jQuery, o que tornará muito mais fácil selecionar e manipular elementos DOM.,
resumo
as opções permitem – lhe configurar opções seleccionáveis para os seus utilizadores-quer para activar ou desactivar uma única opção, quer para permitir várias escolhas, como no exemplo de Pet favorito. Você deve usar etiquetas para amarrar sua checkbox e o texto descritivo juntos, para permitir que o usuário clique em uma área maior ao manipular a checkbox – isso também é bom para auxiliar tecnologias como leitores de tela para deficientes visuais.
