Recentemente houve uma pergunta aqui no Stack Overflow sobre alterar o comportamento padrão do checkbox
para atuar na página como um radio
, isto é, ao ser selecionado um item, os outros deveriam ser desmarcados, mantendo a seleção única. As respostas foram dadas utilizando JavaScript basicamente alterando o comportamento natural do checkbox
tratando os eventos nesse elemento. Eu sempre acreditei que fazê-lo não era recomendado e que o ideal mesmo seria utilizar o próprio elemento radio
por questões de semântica. Eu cheguei a comentar a possível solução utilizando a propriedade appearance
do CSS, pois mantém a semântica do código, alterando apenas a aparência do elemento, sem necessitar de JavaScript:
input[type=radio] {
appearance: checkbox;
-moz-appearance: checkbox;
-webkit-appearance: checkbox;
}
<input name="foo" type="radio" value="1" checked> 1
<input name="foo" type="radio" value="2"> 2
<input name="foo" type="radio" value="3"> 3
Porém, pesquisando, vi que tal propriedade foi removida do CSS 3, então, mesmo que os navegadores ainda suportam tal propriedade, acredito que seu uso deve ser evitado e que a abordagem utilizando JavaScript é comumente discutida em fóruns, mas são poucos os lugares que discutem se de fato é apropriado fazê-lo.
A conclusão que chego é que não se deve alterar o comportamento de um elemento enquanto semanticamente é apropriado utilizar outro, mas não consigo afirmar canonicamente qual é o impacto tanto de desempenho, se houver, quanto na usabilidade da página.
Então:
- É permitido utilizar JavaScript para alterar o comportamento natural de um elemento para agir como outro?
- Qual é o impacto gerado por esta abordagem? Existe uma diferença de desempenho na renderização da página? E como isso pode afetar a usabilidade?
- Se a usabilidade for diretamente afetada, é possível corrigir utilizando o atributo
role="checkbox"
?
Nota: o exemplo dado entre
checkbox
eradio
foi mais para contextualização do problema e as respostas podem, preferencialmente, abordar outros exemplos, se necessário.
checkbox
se comportar com umradio button
, ele está fazendo exatamente isso, babelizando o mundo. Ensine a ele que existe uma linguagem visual comum no mundo da Web.apperance: checkbox
pode ser não recomendado, mas nada impede de estilizar um elemento com as demais features das css3. Aproveitando, editei a resposta lá. Um radio é um radio =)