Estoy realizando una página web que me permite hacer varios pedidos. Está divido en un grupo "padre", unos grupos "hijos" y unos subgrupos con información.
El problema, es que al seleccionar el checkbox que me selecciona todos, me selecciona absolutamente todos los checkboxes que hay y no los de la información que pertenecen a su grupo.
Aquí está el código:
function marcar(source) {
var checkboxes = document.getElementsByTagName('input'); //obtenemos todos los controles del tipo Input
for (i = 0; i < checkboxes.length; i++) //recorremos todos los controles
{
if (checkboxes[i].type == "checkbox") //solo si es un checkbox entramos
{
checkboxes[i].checked = source.checked; //si es un checkbox le damos el valor del checkbox que lo llamó (Marcar/Desmarcar Todos)
}
}
}
function marcarHijos(source) {
var form2 = document.getElementById("form2");
var checkboxes = form2.getElementsByTagName('input'); //obtenemos todos los controles del tipo Input
for (i = 0; i < checkboxes.length; i++) //recorremos todos los controles
{
if (checkboxes[i].type == "checkbox") //solo si es un checkbox entramos
{
checkboxes[i].checked = source.checked; //si es un checkbox le damos el valor del checkbox que lo llamó (Marcar/Desmarcar Todos)
}
}
}
<details>
<summary>
Grupo 1.
</summary>
<details>
<summary><input type="checkbox" onclick="marcar(this);">Grupo 1.1</summary>
<input type="checkbox" name="check1">Primera Información.
<input type="checkbox" name="check1">Segunda Información.
<input type="checkbox" name="check1">Tercera Información.
</details>
<summary>
Grupo 2.
</summary>
<details>
<summary><input type="checkbox" onclick="marcarHijos(this);">Grupo 2.1</summary>
<input type="checkbox" name="check1">Primera Información.
<input type="checkbox" name="check1">Segunda Información.
<input type="checkbox" name="check1">Tercera Información.
</details>
</details>