When clicking a checkbox, automatically mark other checkboxes

Question

I have the following code:

<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>

I would like the user when selecting the Soap, all the fields connected to the Soap were marked, the same for the item Computer and Smartphones. I saw that here had a similar question, but I am a layman in jquery and I’m having a hard time understanding the examples applied in this link. Includes only 03 examples, the system will actually have more items.

Answer 1

First very important point, you are working with input of the kind radio and not checkbox, soon you won’t be able to select more than one.

---

Changing your inputs to checkbox, you can use the querySelectorAll, performing a filter that brings the elements you want to mark, see example below:

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>

In this example, I created a function in onclick for the inputs that will mark the others, I take the value to search with the querySelectorAll, searching for all elements that end with such value.

---

Documentation: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll