<input type="checkbox">

Note: Nota : Os botões de opção são semelhantes às caixas de seleção, mas com uma distinção importante: os botões de opção são agrupados em um conjunto no qual apenas um botão pode ser selecionado por vez, enquanto as caixas de seleção permitem ativar e desativar valores únicos. Quando existem vários controles, os botões de opção permitem que um seja selecionado de todos, enquanto as caixas de seleção permitem que vários valores sejam selecionados.

Um DOMString representando o valor da caixa de seleção. Isso nunca é visto no lado do cliente, mas no servidor esse é o value atribuído aos dados enviados com o name da caixa de seleção. Tome o seguinte exemplo:

<form>
  <div>
    <input
      type="checkbox"
      id="subscribeNews"
      name="subscribe"
      value="newsletter" />
    <label for="subscribeNews"> Subscreva a newsletter? </label>
  </div>
  <div>
    <button type="submit">Subscrever</button>
  </div>
</form>

Neste exemplo, temos um nome subscribee um valor de newsletter. Quando o formulário é enviado, o par de nome / valor de dados será subscribe=newsletter.

Se o atributo value for omitido, o valor padrão da caixa de seleção é on , portanto, os dados enviados nesse caso seriam subscribe=on.

Note: Nota : Se uma caixa de seleção estiver desmarcada quando seu formulário for enviado, não haverá nenhum valor enviado ao servidor para representar seu estado desmarcado (por exemplo value=unchecked); o valor não é submetido ao servidor.

Já cobrimos o uso mais básico de caixas de seleção acima. Vamos agora olhar para os outros recursos e técnicas relacionados à caixa de seleção que você precisa.

O exemplo que vimos acima continha apenas uma caixa de seleção; em situações do mundo real, você provavelmente encontrará várias caixas de seleção. Se eles não estiverem relacionados, você pode lidar com todos eles separadamente, como mostrado acima. No entanto, se todos estiverem relacionados, as coisas não são tão simples.

Por exemplo, na demonstração a seguir, incluímos várias caixas de seleção para permitir que o usuário selecione seus interesses (veja a versão completa na seção Examples).

<fieldset>
  <legend>Escolha seus interesses</legend>
  <div>
    <input
      type="checkbox"
      id="codificação"
      name="interesse"
      value="codificação" />
    <label for="coding"> Codificação </label>
  </div>
  <div>
    <input type="checkbox" id="música" name="interesse" value="música" />
    <label for="music"> Música </label>
  </div>
</fieldset>

Neste exemplo, você verá que atribuímos a cada caixa de seleção o mesmo name. Se ambas as opções são verificados e, em seguida, o formulário é enviado, você terá uma série de pares nome / valor apresentado assim: interest=coding&interest=music. Quando esses dados atingirem o lado do servidor, você poderá capturá-los como uma matriz de valores relacionados e tratá-los adequadamente - consulte Lidar com várias caixas de seleção com uma única variável de servidor , por exemplo.

Para fazer uma caixa de seleção marcada por padrão, você simplesmente atribui o atributo checked. Veja o exemplo abaixo:

<fieldset>
  <legend>Escolha seus interesses</legend>
  <div>
    <input
      type="checkbox"
      id="codificação"
      name="interesse"
      value="codificação"
      checked />
    <label for="coding"> Codificação </label>
  </div>
  <div>
    <input type="checkbox" id="música" name="interesse" value="música" />
    <label for="music"> Música </label>
  </div>
</fieldset>

Nos exemplos acima, você deve ter notado que pode alternar uma caixa de seleção clicando no elemento <label> associado e na própria caixa de seleção. Esse é um recurso realmente útil de rótulos de formulários HTML que facilitam o clique na opção desejada, especialmente em dispositivos de tela pequena, como smartphones.

Além da acessibilidade, esse é outro bom motivo para configurar corretamente os <label>elementos em seus formulários.

Além dos estados marcado e não marcado, há um terceiro estado em que uma caixa de seleção pode estar: indeterminada. Este é um estado em que é impossível dizer se o item está ativado ou desativado. Isso é definido usando a propriedade indeterminate do objeto HTMLInputElement via JavaScript (não pode ser definido usando um atributo HTML):

inputInstance.indeterminate = true;

Uma caixa de seleção no estado indeterminado tem uma linha horizontal na caixa (parece um hífen ou sinal de menos) em vez de uma marca de verificação na maioria dos navegadores.

Não há muitos casos de uso para essa propriedade. O mais comum é quando uma caixa de seleção está disponível e "possui" um número de subopções (que também são caixas de seleção). Se todas as subopções estiverem marcadas, a caixa de seleção proprietária também será marcada e, se todas elas estiverem desmarcadas, a caixa de seleção proprietária será desmarcada. Se uma ou mais das subopções tiverem um estado diferente das outras, a caixa de seleção proprietária está no estado indeterminado.

Isso pode ser visto no exemplo abaixo (graças aos CSS Tricks para a inspiração). Neste exemplo, acompanhamos os ingredientes que estamos coletando para uma receita. Quando você marca ou desmarca a caixa de seleção de um ingrediente, uma função JavaScript verifica o número total de ingredientes verificados:

• Se nenhum deles estiver marcado, a caixa de seleção do nome da receita está definida como desmarcada.
• Se um ou dois estiverem marcados, a caixa de seleção do nome da receita está definida como indeterminate.
• Se todos os três forem marcados, a caixa de seleção do nome da receita estará definida como checked.

Portanto, neste caso, o indeterminateestado é usado para afirmar que a coleta dos ingredientes foi iniciada, mas a receita ainda não está completa.

  var overall = document.querySelector ('input[id = "EnchTbl"]');
  var ingredients = document.querySelectorAll ('ul input');

  overall.addEventListener ('clique', function (e) {
    e.preventDefault ();
  });

  for(var i = 0; i <ingredientes.length; i ++) {
    ingredientes [i] .addEventListener ('click', updateDisplay);
  }

  função updateDisplay () {
    var checkedCount = 1;
    for(var i = 0; i <ingredientes.length; i ++) {
      if (ingredientes [i] .checked) {
        checkedCount ++;
      }
    }

    if (checkedCount === ingredientes.length + 1) {
      overall.checked = true;
      overall.indeterminate = false;
    } else if (checkedCount <= ingredients.length + 1 && checkedCount> 1) {
      overall.checked = false;
      overall.indeterminate = true;
    } else {
      overall.checked = false;
      overall.indeterminate = false;
    }
  }

Note: Nota : Se você enviar um formulário com uma caixa de seleção indeterminada, a mesma coisa acontece como se o formulário estivesse desmarcado - nenhum dado é enviado para representar a caixa de seleção.

As caixas de seleção suportam validação (oferecidas para todos os <input>s). No entanto, a maioria dos ValidityState s sempre será false. Se a caixa de seleção tiver o required atributo, mas não estiver marcada, ela ValidityState.valueMissing será true.

O exemplo a seguir é uma versão estendida do exemplo "multiple checkboxes" que vimos acima - tem mais opções padrão, além de uma caixa de seleção "other" que quando marcada faz com que um campo de texto apareça para inserir um valor para a opção "other". Isto é conseguido com um simples bloco de JavaScript. O exemplo também inclui alguns CSS para melhorar o estilo.

• <input> e a interface HTMLInputElement que o implementa.
• Os seletores CSS : checked e : indeterminate permitem que você marque as caixas de seleção com base em seu estado atual