Caixas de seleção são um componente de entrada fundamental normalmente representado por uma caixa vazia no não selecionado estado e uma caixa com uma marca de seleção (daí o nome da caixa de seleção) quando selecionado. Eles são usados para representar uma escolha booleana, cada um correlacionado a uma escolha de valor.
Gerenciar caixas de seleção em HTML, especificamente usando JavaScript e jQuery, pode parecer um pouco anormal. Espero resolver problemas comuns que você pode ter com este tutorial.
As caixas de seleção são boas para usar quando você precisa coletar uma escolha verdadeiro/falso (booleano) ou vários valores de uma lista de opções.
Os botões de opção oferecem uma metáfora de seleção booleana semelhante, mas são usados quando há uma única escolha disponível em uma lista.
Existem dois casos de uso gerais para uma caixa de seleção:
- Quando você precisa de confirmação ou reconhecimento, por exemplo, reconhecendo os termos de uso
- Quando vários valores podem responder a uma única pergunta
Caixas de seleção são usadas para casos em que um usuário pode desejar selecionar várias opções, como no caso de uma pergunta”marque todas as opções aplicáveis”. Caixas de seleção HTML selecionadas. Um elemento de caixa de seleção pode ser colocado em uma página da web de uma forma pré-marcada, definindo o atributo marcado com um valor”sim”.
O HTML correto para fazer uma caixa de seleção
Lá parece haver confusão sobre a maneira adequada ou correta de escrever checkbox html. Eu também estive lá, então tenho empatia com todos.
No que diz respeito à interface do usuário da caixa de seleção, você deve incluir uma caixa de seleção e um elemento de rótulo, nessa ordem. Isso naturalmente colocará a caixa de seleção à esquerda do rótulo.
Se você precisar trocar o pedido, pode trocar o html ou usar CSS. No entanto, vou alertá-lo novamente que, a menos que você saiba que pode manter as caixas de seleção relacionadas ou agrupadas alinhadas horizontalmente.
Por natureza, as caixas de seleção são alvos pequenos, o que para a área de trabalho e o mouse é normal, mas nos dispositivos móveis de hoje O primeiro mundo pode ser problemático.
A boa notícia é que você pode relacionar o rótulo de uma caixa de seleção à caixa de seleção, estendendo a área acionável na qual o usuário pode clicar ou tocar para alternar o estado de seleção.
Isso é feito adicionando um atributo’name’ou’id’ao elemento checkbox e um atributo’for’correspondente ao rótulo. O rótulo do valor do atributo deve corresponder ao nome da caixa de seleção ou ao valor do id.
A propriedade ou atributo do valor
Programaticamente, você pode obter o valor atual ou verificar o estado da propriedade do valor, que também é um atributo. O valor não é verdadeiro ou falso, embora a natureza da caixa de seleção indique se um valor está selecionado ou não.
var btnSubscribe=document.getElementById ("btnSubmitSubscribe"); btnSubscribe.addEventListener ("click", function (evt) {evt.preventDefault (); var subscribe=document.querySelector ("[name=subscribe]"); console.log (subscribe.value);//escreve'newsletter'return false;});
Você pode obter a propriedade value independente do estado verificado. Portanto, certifique-se de adicionar a lógica ao seu código de validação e serialização para dar conta desse comportamento.
Caixas de seleção de renderização marcadas por padrão
Ao renderizar uma página com uma caixa de seleção que você deseja marcar ou marcar por padrão, você precisa incluir o atributo’marcado’. Não há valor obrigatório para o atributo marcado.
No entanto, de acordo com a especificação da caixa de seleção, apenas um valor vazio ou’marcado’é válido.
Quando marcado, é adicionado ao elemento checkbox do navegador irá renderizá-lo conforme selecionado.
Como detectar se uma caixa de seleção foi marcada?
Quando um formulário é enviado ou serializado, o valor de uma caixa de seleção é associado ao nome da caixa de seleção. É responsabilidade do servidor lidar com essa relação chave/valor. Isso ocorre quando um formulário é postado diretamente em um URL de destino usando a codificação do formulário.
Ao usar a codificação do formulário, as caixas de seleção do mesmo nome são todas serializadas:
mininterest=javascript & mininterest=html
Você é responsável por lidar com o envio do formulário no servidor. Como existem centenas de plataformas, nem tentarei demonstrar isso neste artigo.
Se uma caixa de seleção estiver desmarcada, o valor correspondente não será serializado.
Quando você está lidando com a serialização em seu JavaScript, você é responsável por esta serialização. Eu geralmente intercepto qualquer envio de formulário e executo validação e serialização antes de postar JSON em uma API, o que significa que preciso lidar com esses cenários.
função validateInterest (evt) {evt.preventDefault (); var mininterest=document.querySelectorAll ("[name=mininterest]"); contagem de var=0, interesses=[]; for (var i=0; i 1) {addToLog ("suficientes interesses selecionados:"+ interesses); } else {addToLog ("** NÃO É SUFICIENTE ** interesses selecionados:"+ interesses); } return false;}
A prática recomendada é serializar os valores selecionados em uma matriz. Você poderia fazer uma estrutura mais complexa se necessário, mas acho que uma matriz deve lidar com quase todos os casos.
A propriedade do valor da caixa de seleção não é necessária. Se nenhum valor for usado ao enviar, o valor será definido como’ativado’se a entrada for selecionada. Se a caixa de seleção não estiver marcada, nenhum valor será fornecido. Isso significa que seu código de processamento do lado do servidor precisa ser robusto o suficiente para lidar com este estado nulo ou vazio.
Lidando com os eventos de mudança de estado da caixa de seleção
Você deseja acionar uma resposta em tempo real para uma mudança no estado verificado. Você pode fazer isso vinculando um manipulador de eventos ao evento de alteração da caixa de seleção.
function bindStateChanges () {var interest=document.querySelectorAll ("[nome=interesse"); for (var index=0; index
Aqui, vinculei manipuladores de eventos a todas as caixas de seleção com o nome'interesse'. Estou simplesmente registrando a atividade na página para demonstrar como lidar com a mudança. Você gostaria de adicionar sua própria lógica no manipulador.
Caixas de seleção de agrupamento
Como já mencionei, as caixas de seleção especializar estão coletando uma única escolha de valor. Mas que tal precisar de várias opções?
É aqui que a caixa de seleção fica ainda melhor, por meio do agrupamento. Aqui você tem duas ou mais caixas de seleção com o mesmo nome, mas valores diferentes. Já vimos como isso pode ser usado nos exemplos anteriores.
Neste exemplo, ambas as caixas de seleção marcam o nome'interesse', mas têm valores de id e valor exclusivos.
Definindo um grande acerto ou área de toque
As caixas de seleção são alvos pequenos. Com o surgimento de smartphones e telas sensíveis ao toque, pequenos alvos são um problema. Alvos pequenos também são um problema para tecnologias assistivas e usuários com visão deficiente.
É por isso que você deve sempre associar o rótulo da caixa de seleção à caixa de seleção. A área de toque não se limita apenas ao retângulo imediato da caixa de seleção, mas também inclui o retângulo do rótulo associado quando estão associados.
Também acho que essa é uma prática recomendada porque muitos usuários tentam primeiro tocar e clicar no rótulo em vez da caixa de seleção. Acho que isso é porque eles assumem que, especificamente em uma tela de toque, eles são um único botão. Claro que esta é apenas minha opinião, mas com base na observação e conversa com usuários finais típicos.
Você associa um rótulo a uma caixa de seleção com o atributo'para'. A caixa de seleção deve incluir um valor de id exclusivo. O valor do rótulo deve corresponder ao valor de id da caixa de seleção.
Como as caixas de seleção costumam ser feitas como uma lista, você deve criar algum tipo de convenção de nomenclatura exclusiva. Por exemplo, uma lista de compras de macarrão e almôndega pode usar:
- 'spaghettie-almôndegas-espaguete'
- 'spaghettie-almôndegas-almôndegas'
- 'spaghettie-meatballs-sauce'
Observe como cada um começa com o mesmo valor,'spaghettie-meatballs-'? Isso ajuda a agrupar logicamente as caixas de seleção relacionadas. O valor único é o valor do sufixo do id, que se correlaciona com a propriedade value.
Apenas certifique-se do que eu chamo de slugify os valores do id se você os estiver gerando automaticamente. Com isso, quero dizer remover espaços e caracteres'estranhos'. Basta usar caracteres comuns, travessões e sublinhados. E não se esqueça de tornar o servidor inteligente o suficiente para usar esses valores!
O estado indeterminado
Há um terceiro estado em que uma caixa de seleção pode estar ao lado de marcada e desmarcada, indeterminado. Isso só pode ser definido via JavaScript e faz com que a caixa de seleção seja renderizada com uma linha horizontal na caixa, em vez de apenas uma caixa ou uma caixa com uma marca.
Você pode estar se perguntando quando pode querer usar isso estado?
O estado indeterminado é comumente usado quando há vários filhos ou subopções disponíveis. Você pode definir o estado para indeterminado quando um número mínimo de opções filho não for selecionado.
function setupIndeterminate () {var pickInterest=document.querySelectorAll ("[name=pickInterest"), parentInterest=document.getElementById ("pickInterests"); for (índice var=0; índice
Este cenário poderia usar uma caixa de seleção habilitada indeterminada como uma fila visual ou parte de uma seleção/desmarcar toda a IU.
Você poderia emparelhar a configuração lógica indeterminada com sua lógica de validação de formulário. Freqüentemente, quando uma caixa de seleção está em estado indeterminado, o formulário ainda não está completo, portanto, você pode aplicar a lógica de validação do formulário de acordo.
Se o formulário for enviado enquanto estiver em estado indeterminado, ele será serializado como não verificado.
Resumo
Espero que isso tenha ajudado a esclarecer algumas dúvidas comuns que você possa ter sobre o uso da caixa de seleção HTML. Este é um dos elementos HTML originais e manteve a maioria de seus recursos originais, mas, como acontece com qualquer coisa da web, crescemos para fazer com que as caixas de seleção façam muito mais.
Certifique-se de ler os próximos artigos sobre como criar itens personalizados caixas de seleção estilizadas para que você não fique limitado à seleção enfadonha na IU da caixa!
