Como dar uncheck no botao radio

Olá Sung Ju No, tudo bem?

No botão rádio, caso você clique em um botão e em seguida clique em outro, automaticamente é feito o unchecked no botão que foi clicado anteriormente.

Entretanto, caso ou seu desejo é dar o unchecked em um botão que foi selecionado sem precisar clicar em um outro botão, isso pode ser feito por meio de JavaScript. Explicarei melhor a seguir:

Objetivo: criar uma função que ao clicar em um input radio que já está selecionado, ela faz com que esse elemento seja desmarcado.

HTML

Já temos o seguinte código:

<form>
  <div>
    <p>Como prefere o nosso contato?</p>
    <label for="radio-email">Email</label>
    <input type="radio" name="contato" value="email" id="radio-email">
    <label for="radio-telefone">Telefone</label>
    <input type="radio" name="contato" value="telefone" id="radio-telefone">
    <label for="radio-whatsapp">WhatçsApp</label>
    <input type="radio" name="contato" value="whatsapp" id="radio-whatsapp">
  </div>
<form>

JAVASCRIPT

Vamos ao nosso objetivo!

• Passo 1

function aoSelecionarInput (event) {

}

No arquivo JavaScript, criei uma função que foi chamada simbolicamente de aoSelecionarInput e ela recebe um event (evento), que representa o novo clique no botão que já estava selecionado.

• Passo 2

function aoSelecionarInput (event) {
  const inputClicado = event.target

}

Na primeira linha dessa função, utilizei o método target que irá capturar qual input que foi clicado, isso é necessário visto que temos mais de um input no projeto e precisamos saber exatamente qual que foi clicado.

HTML

• Passo 3

Para que a função tenha o efeito que desejamos, precisamos ir no arquivo HTML e em cada input colocar o atributo onchange, passando como valor o nome da função que estamos trabalhando com o event como parâmetro.

O evento do tipo onchange é utilizado para quando o valor de um elemento foi alterado. O código ficará assim:

<form>
  <div>
    <p>Como prefere o nosso contato?</p>
    <label for="radio-email">Email</label>
    <input type="radio" name="contato" value="email" id="radio-email" onchange="aoSelecionarInput(event)">
    <label for="radio-telefone">Telefone</label>
    <input type="radio" name="contato" value="telefone" id="radio-telefone" onchange="aoSelecionarInput(event)">
    <label for="radio-whatsapp">WhatçsApp</label>
    <input type="radio" name="contato" value="whatsapp" id="radio-whatsapp" onchange="aoSelecionarInput(event)">
  </div>
<form>

• Passo 4

Voltando ao JavaScript!

Agora que já coletamos o elemento que foi clicado novamente, precisamos de fato fazer o unchecked nele.

Dentro da função que já criamos, criaremos uma nova função especifica para isso. Como o input radio que foi clicado possui o checked selecionado, ou seja, true, essa função irá fazer com que o checked seja modificado para false, desmarcando o elemento.

  function removeSelecao () {
      inputClicado.checked = false
  }
}

• Passo 5

Entretanto, a função acima só deverá ser chamada quando o input radio for clicado em um momento em que o seu checked esteja true, ou seja quando ele já estiver sido clicado anteriormente.

  function removeSelecao () {
      inputClicado.checked = false
  }

  inputClicado.addEventListener('click', removeSelecao, { once: true })
}

Assim, adicionamos um evento ao input que foi clicado (addEventListeneter) que será disparado somente quando já estiver selecionado (once: true) e este evento estará chamando a função removeSelecao, que criamos anteriormente.

O código JS completo ficará assim:

function aoSelecionarInput (event) {
  const inputClicado = event.target

  function removeSelecao () {
      inputClicado.checked = false
  }

  inputClicado.addEventListener('click', removeSelecao, { once: true })
}

Você pode verificar a funcionalidade desse projeto nesse CodePen que criei.

Como o tópico foi aberto com a etiqueta dos cursos de HTML e CSS, talvez tenham ficado algumas dúvidas, mas estou a disposição para ajudar caso precise.

Abraços e bons estudos!

Obrigado Beatriz era exatamente essa opção que estava em dúvida, esses termos usados como event.target, addEventListener é algo que aprendemos no curso? A melhor maneira de saber que existe esses eventos é olhando a documentação?

Olá! Obrigada pelo retorno :)

Aprende sim! Tudo que citei na explicação aprendi aqui na Alura com os cursos de JavaScript da formação Front-end.

Sobre a documentação, ela é indispensável então sempre que quiser saber mais sobre qualquer assunto você pode utilizá-la como um guia.

Espero ter ajudado, abraços!