1

Tenho o seguinte código:

<input type="radio" name="Tipo" value="Sabonete"> Sabonete<br>
<input type="radio" name="TipoSabonete" value="Neutro"> Neutro<br>
<input type="radio" name="TipoSabonete" value="Phebo"> Phebo<br>
<input type="radio" name="TipoSabonete" value="Dove"> Dove<br>

<hr>

<input type="radio" name="Tipo" value="Informatica"> Informática<br>
<input type="radio" name="TipoInformatica" value="Notebook"> Notebook<br>
<input type="radio" name="TipoInformatica" value="Desktop"> Desktop<br>
<input type="radio" name="TipoInformatica" value="Tablets"> Tablets<br>

<hr>

<input type="radio" name="Tipo" value="Smartphones"> Smartphones<br>
<input type="radio" name="TipoSmartphones" value="LG"> LG<br>
<input type="radio" name="TipoSmartphones" value="Samsung"> Samsung<br>
<input type="radio" name="TipoSmartphones" value="Nokia"> Nokia<br>

Gostaria que o usuário ao selecionar o Sabonete, todos os campos ligados ao Sabonete ficassem marcados, o mesmo para o item Informática e Smartphones. Vi que aqui teve uma pergunta parecida, mas sou leigo em jquery e estou com dificuldades de entender os exemplos aplicados nesse link. Inclui somente 03 exemplos, o sistema terá na verdade mais itens.

1
  • Seria interessante se nesse site tivesse a opção da pessoa que está negativando a pergunta colocar o motivo, pois do jeito que está, dá-se a entender que essa pessoa não sabe a resposta e com isso é mais cômodo negativar do que ajudar!
    – user24136
    Commented 14/05/2020 às 22:58

1 Resposta 1

3

Primeiro ponto bem importante, você está trabalhando com input do tipo radio e não checkbox, logo você não vai conseguir selecionar mais de um.


Alterando seus inputs para checkbox, você consegue utilizar do querySelectorAll, efetuando um filtro que traga os elementos que você deseja marcar, veja exemplo abaixo:

function marcarTodos(radio) {
  const itens = document.querySelectorAll(`[name$=${radio.value}]`);

  for(item of itens) {
    item.checked = radio.checked;
  }
}
<input type="checkbox" onclick="marcarTodos(this)" name="Tipo" value="Sabonete"> Sabonete<br>
<input type="checkbox" name="TipoSabonete" value="Neutro"> Neutro<br>
<input type="checkbox" name="TipoSabonete" value="Phebo"> Phebo<br>
<input type="checkbox" name="TipoSabonete" value="Dove"> Dove<br>

<hr>

<input type="checkbox" onclick="marcarTodos(this)" name="Tipo" value="Informatica"> Informática<br>
<input type="checkbox" name="TipoInformatica" value="Notebook"> Notebook<br>
<input type="checkbox" name="TipoInformatica" value="Desktop"> Desktop<br>
<input type="checkbox" name="TipoInformatica" value="Tablets"> Tablets<br>

<hr>

<input type="checkbox" onclick="marcarTodos(this)" name="Tipo" value="Smartphones"> Smartphones<br>
<input type="checkbox" name="TipoSmartphones" value="LG"> LG<br>
<input type="checkbox" name="TipoSmartphones" value="Samsung"> Samsung<br>
<input type="checkbox" name="TipoSmartphones" value="Nokia"> Nokia<br>

Nesse exemplo, criei uma função no onclick para os inputs que vão marcar os demais, aproveito o value para efetuar a busca com o querySelectorAll, buscando todos os elementos que terminam com tal valor.


Documentação: https://developer.mozilla.org/pt-BR/docs/Web/API/Document/querySelectorAll

1
  • 1
    Obrigado Daniel. Funcionou perfeitamente!!!
    – user24136
    Commented 18/05/2020 às 9:48

Você deve fazer log-in para responder a esta pergunta.