Checkboxes

Quando desejamos mostrar opções que oferecem multipla escolha, podemos utilizar o elemento "Checkbox" (caixa de seleção). O checkbox é diferente do "radio", permitindo ao usuário selecionar multiplas opções, ao invés de apenas uma. A caixa de seleção é simplesmente um elemento input com a propriedade type ajustada para checkbox. Veja o exemplo abaixo:

<input type="checkbox">

No entanto, assim como em todos os elementos input, você precisa definir um name (nome) para que a caixa de seleção seja usável - sem um nome o elemento não será identificável ao enviar o formulário para processamento no servidor. Você também pode definir o value - esse será o valor enviado ao servidor se a caixa de seleção for marcada. Aqui está um exemplo:

<input type="checkbox" name="nameOfChoice" value="1">

Neste exemplo, se a caixa de seleção estiver marcada e o formulário for enviado ao servidor, o servidor será capaz de reconhecer o elemento "nameOfChoice" e seu valor será 1.

Marcado ou não?

Perceba que as caixas de seleção até agora não vieram marcadas desde o início - o usuário teria que interagir com a caixa de seleção para mudar seu estado de não marcado para marcado. Isso pode ser o que você quer, mas as vezes você quer que a caixa de seleção venha marcada por padrão, ou para sugerir uma opção ao usuário ou porque você está mostrando a caixa de seleção com um valor que corresponde a uma configuração existente no banco de dados, por exemplo. Felizmente, é bem simples - apenas adicione o atributo checked à caixa de seleção:

<input type="checkbox" name="nameOfChoice" value="1" checked>

Antigamente, com o uso do XHTML, em que cada atributo sempre deveria ter um valor, até mesmo os atributos booleanos (lógicos), o código ficaria assim:

<input type="checkbox" name="nameOfChoice" value="1" checked="checked" />

Ambas as formas funcionam em todos os navegadores modernos, mas a primeira forma é menor e mais ao estilo HTML5.

Múltiplas escolhas

Até agora todas as nossas caixas de seleção são simples trocas, para definir, por exemplo, se uma opção está ativada ou desativada. Caixas de seleção são ótimas para isso, mas, como mencionado, elas também podem ser usadas para permitir ao usuário selecionar entre uma lista de opções. Vou mostrar com um exemplo para fazer mais sentido:

<form method="post" action="/Tests/Post/">      
    <fieldset>      
        <legend>What is Your Favorite Pet?</legend>      
        <input type="checkbox" name="favorite_pet" value="Cats">Cats<br>      
        <input type="checkbox" name="favorite_pet" value="Dogs">Dogs<br>      
        <input type="checkbox" name="favorite_pet" value="Birds">Birds<br>      
        <br>      
        <input type="submit" value="Submit now" />      
    </fieldset>      
</form>

Perceba que agora nós temos múltiplas caixas de seleção, e embora todas tenham o mesmo nome ("favorite_pet"), têm diferentes valores (value) (ex. "Dogs"). Quando este formulário é enviado ao servidor, todas essas caixas de seleção serão representadas por um único nome, mas o valor será um vetor de 0 a 3 itens. Se você tivesse usado botões de opção (radio) em vez de caixas de seleção, os usuários poderiam escolher apenas um animal favorito, mas com caixas de seleção eles podem selecionar todos eles, alguns deles ou nenhum.

Rótulos para caixas de seleção

Se você testou o exemplo anterior, você viu que nós podemos colocar um texto ao lado de uma caixa de seleção, mas eles ainda assim são duas coisas diferentes - você não pode clicar no texto para ativar a caixa de seleção. Isso pode ser bem chato para o usuário, mas felizmente para nós, é fácil de resolver: basta usar o elemento label (rótulo). Aqui está um exemplo básico para mostrar a diferença:

<input type="checkbox" name="favorite_pet" value="Cats">Cats<br>  
<input type="checkbox" name="favorite_pet" value="Dogs" id="dogs">
<label for="dogs">Dogs</label><br>

Duas caixas de seleção, uma sem rótulo e uma com. Elas podem parecer idênticas, mas a com o rótulo pode ser acionada tanto ao clicar na caixa de seleção quanto ao clicar no rótulo. Isso é bom se você está usando um computador desktop com um mouse, mas ainda melhor se você está usando um dispositivo de toque, como um smartphone, onde pode ser difícil acertar as pequenas caixas de seleção com o dedo.

O rótulo é bem simples - ele usa o atributo for para se ligar a um elemento do formulário com um atributo id equivalente (observe que eu tenho "dogs" em ambos os lugares).

Trabalhando dinamicamente com uma caixa de seleção

Assim como qualquer outro elemento DOM, você pode manipular a caixa de seleção usando JavaScript. Considerando isso, pode ser interessante verificar se uma caixa de seleção está marcada 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 vou usar o exemplo anterior (o seletor de animal favorito) e incluir um pouco da mágica do JavaScript:

<form method="post" action="/Tests/Post">  
    <fieldset>  
    <legend>What is Your Favorite Pet?</legend>  
    <input type="checkbox" name="favorite_pet" value="Cats" onclick="return ValidatePetSelection();">Cats<br>  
    <input type="checkbox" name="favorite_pet" value="Dogs" onclick="return ValidatePetSelection();">Dogs<br>  
    <input type="checkbox" name="favorite_pet" value="Birds" onclick="return ValidatePetSelection();">Birds<br>  
        <br>  
    <input type="submit" value="Submit now">  
    </fieldset>  
</form>  

<script type="text/javascript">  
function ValidatePetSelection()  
{  
    var checkboxes = document.getElementsByName("favorite_pet");  
    var numberOfCheckedItems = 0;  
    for(var i = 0; i < checkboxes.length; i++)  
    {  
        if(checkboxes[i].checked)  
            numberOfCheckedItems++;  
    }  
    if(numberOfCheckedItems > 2)  
    {  
        alert("You can't select more than two favorite pets!");  
        return false;  
    }  
}  
</script>

Permita-me explicar rapidamente o que esse código faz. Nós temos o mesmo formulário de antes, mas adicionamos um manipulador de eventos para cada caixa de seleção, o que faz com que a função JavaScript (ValidatePetSelection) seja chamada quando o usuário clica nelas. Nessa função, obtemos todas as caixas de seleção relevantes usando a função getElementsByName e então utilizamos um loop para verificar se estão marcadas ou não - e vamos somando cada item marcado. Esse número é então verificado e se passar de dois nós alertamos o usuário sobre o problema (apenas dois animais podem ser selecionados) e então retornamos falso. Retornar falso impedirá que a caixa de seleção seja marcada.

Esse foi só um exemplo simples de como trabalhar com caixas de seleção usando JavaScript. Você pode fazer muito mais, principalmente se você usar um framework JavaScript como o jQuery, que vai deixar muito mais fácil selecionar e manipular elementos DOM.

Resumo

Caixas de seleção permitem que você configure opções selecionáveis pelos usuários, tanto para alterar uma única opção como marcada ou desmarcada, quanto para permitir múltiplas escolhas, como no exemplo de animais favoritos. Você deve usar rótulos para ligar uma caixa de seleção a seu texto descritivo, para permitir que o usuário clique em uma área maior para manipular a caixa de seleção - isso também é bom para tecnologias assistivas como leitores de tela para deficientes visuais.