Skip to main content
2 de 3
se añadieron 130 caracteres en el cuerpo; se añadieron 40 caracteres en el cuerpo
Rubén
  • 11.5k
  • 7
  • 41
  • 85

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

Rubén
  • 11.5k
  • 7
  • 41
  • 85