El "problema" con la función marcarHijos
es que no hay ningún elemento con id="form2"
. Una forma "rápida y sucia" de arreglarlo es agregar esto a la primera etiqueta details
y algo similar a la segunda. También de forma "rápida y sucia" para que funcione el checkbox del segundo grupo es replicar la función marcarHijos y ajustarla para dicho grupo.
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 marcarHijos1(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)
}
}
}
function marcarHijos2(source) {
var form2 = document.getElementById("form3");
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 id="form2">
<summary><input type="checkbox" onclick="marcarHijos1(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 id="form3">
<summary><input type="checkbox" onclick="marcarHijos2(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>
Es recomendable que estudies el Modelo de Objeto de Documento (Document Object Model / DOM), los id y otras propiedades de etiquetas y el uso de métodos como getElementById
y similares.
Nota: marcarHijos viene de mi respuesta a Ayuda con Checkbox y JavaScript