Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

<input> elementos do tipo checkboxsão renderizados por padrão como caixas quadradas que são marcadas (marcadas) quando ativadas, como você pode ver em um formulário de papel oficial do governo. Eles permitem que você selecione valores únicos para envio em um formulário (ou não).

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.

Valor Um DOMString representando o valor da caixa de seleção.
Eventos change e input
Atributos comuns suportados checked
Atributos IDL checked e value
Métodos select ()

Valor

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

<form>
  <div>
    <input type = "checkbox" id = "subscribeNews" nome = "subscribe" value = "boletim informativo">
    <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 valueatributo foi omitido, o valor padrão da caixa de seleção é on , portanto, os dados enviados nesse caso seriam subscribe=on.

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.

Usando entradas da caixa de seleção

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.

Lidando com várias caixas de seleção

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" valor = "codificação">
    <label for = "coding"> Codificação </ label>
  </ div>
  <div>
    <input type = "checkbox" id = "música" name = "interesse" valor = "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.

Caixas de verificação por padrão

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

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

Fornecendo uma área de acertos maior para suas caixas de seleção

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.

Caixas de seleção de estado indeterminado

Além dos estados marcados e não verificados, 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 indeterminatepropriedade 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 / marca 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 ('entrada [id = "EnchTbl"]');
  var ingredients = document.querySelectorAll ('ul input');

  overall.addEventListener ('clique', função (e) {
    e.preventDefault ();
  });

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

  função updateDisplay () {
    var checkedCount = 1;
    para (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;
    } outro {
      overall.checked = false;
      overall.indeterminate = false;
    }
  }

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.

Validaçã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.

Exemplos

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.

HTML

<form>
  <fieldset>
  <legend> Escolha seus interesses </ legend>
    <div>
      <input type = "checkbox" id = "codificação" name = "interesse" valor = "codificação">
      <label for = "coding"> Codificação </ label>
    </ div>
    <div>
      <input type = "checkbox" id = "música" name = "interesse" valor = "música">
      <label for = "music"> Música </ label>
    </ div>
    <div>
      <input type = "checkbox" id = "arte" name = "interesse" valor = "arte">
      <label for = "art"> Art </ label>
    </ div>
    <div>
      <input type = "checkbox" id = "sports" nome = "interesse" valor = "esportes">
      <label for = "sports"> Esportes </ label>
    </ div>
    <div>
      <input type = "checkbox" id = "cozinhar" nome = "interesse" valor = "cozinhar">
      <label for = "cooking"> Cozinhando </ label>
    </ div>
    <div>
      <input type = "checkbox" id = "outro" nome = "interesse" valor = "outro">
      <label for = "other"> Outro </ label>
      <input type = "text" id = "otherValue" nome = "outro">
    </ div>
    <div>
      <button type = "submit"> Enviar formulário </ button>
    </ div>
  </ fieldset>
</ form>

CSS

html {
  font-family: sem serifa;
}

Formato {
  largura: 600px;
  margem: 0 auto;
}

div {
  margem inferior: 10px;
}

fieldset {
  fundo: ciano;
  borda: 5px azul sólido;
}

lenda {
  preenchimento: 10px;
  fundo: azul;
  cor: ciano;
}

JavaScript

 

var otherCheckbox = document.querySelector ('entrada [valor = "outro"]');
var otherText = document.querySelector ('input [id = "otherValue"]');
otherText.style.visibility = 'oculto';

otherCheckbox.onchange = function () {
  if (otherCheckbox.checked) {
    otherText.style.visibility = 'visível';
    otherText.value = '';
  } outro {
    otherText.style.visibility = 'oculto';
  }
};

Especificações

Especificação Status Comente
HTML Living Standard
The definition of '<input type = "checkbox">' in that specification.
Padrão em tempo real  
HTML5
The definition of '<input type = "checkbox">' in that specification.
Recomendação  

Compatibilidade do navegador

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes Yes Yes Yes Yes Yes
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes Yes4 Yes Yes ?

Veja também

Etiquetas do documento e colaboradores

Colaboradores desta página: SphinxKnight, creis
Última atualização por: SphinxKnight,