Terça, 16 de Abril de 2024

©2024 CJDinfo®

Radio e Check Button

Aqui temos algumas dicas sobre dois elementos de uso relativamente complicados no HTML. O Radio Button e o Check Button.

O Radio Button ():

O Radio Button, também conhecido como Option Button, é um elemento de seleção de única escolha. De uma lista só é possível selecionar um item. É possível criar mais de uma lista de seleção na mesma página. Basta agrupar os elementos de uma mesma lista com o mesmo nome, como no exemplo abaixo:

No exemplo acima a requisição dos valores dos campos na próxima página, no caso de uma submissão, seria feita através de um simples Request com o nome do grupo (Cor ou Tamanho, no caso). O valor recebido seria o value do item que foi selecionado (vermelho, verde ou azul para Cor e grande ou pequeno para Tamanho). Se nenhum item estivesse selecionado o valor estaria vazio (""). Na realidade se nenhum item estiver selecionado o elemento radio não fará parte da coleção de campos do Request.

Para detectar se um item foi selecionado na página em JavaScript já é um pouco mais complicado. Temos algumas soluções:

1) Se o problema for só garantir a seleção de algum item, basta deixar um deles pré-selecionado no desenho da página, através da opção checked dentro da tag HTML. Como não é possível desativar uma seleção feita (apenas mudá-la de opção) não há como o item ficar vazio. Desta forma não é necessário o uso do JavaScript.

2) Se não for possível manter um item pré-selecionado, uma solução prática é amarrar em cada item, no evento de OnClick, uma rotina JavaScript que registre a seleção atual numa variável. Na submissão da página essa variável seria verificada (se foi ou não preenchida). Veja no exemplo abaixo:

A vantagem desta solução é a possibilidade de detectar QUAL FOI o item selecionado, bastando verificar o conteúdo da variável utilizada (Cor, no exemplo).

3) Se houver necessidade de criar algo mais complexo, onde será necessário acessar elementos radio isoladamente, será necessário ter um form na página. Supondo que este Formulário tenha o nome de "form", temos algumas considerações a fazer, principalmente se a lista apresentada for de tamanho variável:

3a) No caso de não existir nenhum item, nada deverá ser verificado;

3b) No caso de existir apenas um item, o estado deste poderá ser detectado, por exemplo, pelo comando:

No exemplo receberíamos na variável i o valor true ou false, conforme o estado de seleção do elemento. Poderíamos acionar a seleção deste item, forçando a expressão toda a true.

3c) No caso de existir mais de um item, o Grupo todo se comporta como um Array, de forma que o estado de cada elemento poderá ser detectado, por exemplo, pelo comando:

Para exemplificar, apresentamos uma rotina utilizada no final de uma página que contém uma lista de opções com quantidade variável. O Código ASP carrega a variável QtdOpt, durante o desenho da página, com a quantidade de itens apresentados. No final o JavaScript apresentado (que é executado no OnLoad do body da página) retira a seleção de todos os itens, para solucionar um problema de retorno com o Back do navegador, onde o item selecionado se mantém, o que não deveria de acontecer:

O Check Button ():

O Check Button (ou checkbox) é um elemento de seleção de multipla escolha. De uma lista é possível selecionar um ou mais itens.

Ao contrário do Radio Button o Check é individual. Cada elemento deve ter um nome próprio e um valor. Se este campo estiver selecionado numa submissão de página, o Request receberá o value carregado. Se não estiver selecionado, receberá vazio ("").

No exemplo acima, o Request do "Campo1" retornaria "ON" se o check estivesse selecionado e "" se não.

Para verificar o estado deste check em JavaScript, supondo que exista um Formulário com o nome "form", bastaria usar o comando:

Retornar