Trabalhando com Caixas de Seleção e Botões de Opção em JavaScript

Caixas de Seleção

Os elementos de entrada que formam um grupo especial são as caixas de seleção (checkboxes) e os botões de opção (radiobuttons).

As caixas de seleção representam um campo onde se podem marcar opções, criadas com o elemento <input type="checkbox" />. Uma característica distintiva das caixas de seleção é a propriedade checked, que assume o valor true quando estão marcadas:

<form name="myForm"><input type="checkbox" name="enabled" checked /><span>Ativar</span></form>
<div id="printBlock"></div>
<script>
  const enabledBox = document.myForm.enabled;
  const printBlock = document.getElementById("printBlock");
  // passamos o valor definido para printBlock
  enabledBox.addEventListener("click", (e) => (printBlock.textContent = e.target.checked));
</script>

Ao clicar na caixa, é disparado um evento de clique. Neste caso, ao tratar esse evento, simplesmente exibimos se a caixa está marcada ou não em um bloco div.

Caixas de Seleção em JavaScript

Botões de Opção

Os botões de opção representam um grupo de botões, dos quais só podemos escolher um. Eles são criados com o elemento <input type="radio" />.

Selecionar ou clicar em um deles também gera um evento de clique:

<form name="myForm"><input type="radio" name="languages" value="Java" /><span>Java</span> <input type="radio" name="languages" value="C#" /><span>C#</span> <input type="radio" name="languages" value="C++" /><span>C++</span></form>
<div id="printBlock"></div>
<script>
  const printBlock = document.getElementById("printBlock");
  const myForm = document.myForm;
  function onclick(e) {
    printBlock.textContent = `Você escolheu: ${e.target.value}`;
  }
  for (let i = 0; i < myForm.languages.length; i++) {
    myForm.languages[i].addEventListener("click", onclick);
  }
</script>

Ao criar um grupo de botões de opção, o atributo name de cada um deve ter o mesmo valor, no caso, languages, formando assim um grupo.

Como pode haver muitos botões de opção, ao anexar um manipulador de eventos a eles, precisamos percorrer todo o array de botões, que pode ser obtido pelo nome do grupo:

for (let i = 0; i < myForm.languages.length; i++) {
  myForm.languages[i].addEventListener("click", onclick);
}

O valor do botão selecionado também pode ser obtido através do objeto Event: e.target.value

Botões de Opção em JavaScript

Cada botão de opção, assim como a caixa de seleção, possui a propriedade checked, que retorna o valor true se o botão estiver marcado. Por exemplo, podemos marcar o último botão do grupo:

myForm.languages[myForm.languages.length - 1].checked = true;