1

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>

6
  • En las preguntas sólo debe incluirse contenido relevante, no presentaciones sociales, saludos, despedidas, firmas, etc. que no aporte a entender la pregunta. Los títulos deben ser un resumen de la pregunta y aunque deben ser breves también deben ser específicos.
    – Rubén
    Commented el 19 feb. 2019 a las 3:50
  • En mi respuesta anterior te dí n ejemplo de cómo seleccionar los elementos hijos de un elemento padre. Aquí incluyes la función marcarHIjos de dicha respuesta pero la haz incluído tal cual, no la has adaptado al nuevo HTML
    – Rubén
    Commented el 19 feb. 2019 a las 3:53
  • La verdad, no sé qué más modificar para que este ejemplo resulte como lo pido. Con base a tu respuesta anterior, he trabajado, pero aún así, no me funciona.
    – Saco04
    Commented el 19 feb. 2019 a las 13:43
  • El código en mi respuesta funciona de acuerdo a lo que entendí que pides, si no es así, ¿en qué falla? Quizás no entendí o quizás debas revisar la redacción de la pregunta para hacerla más clara en cualquier caso es importante que leas acerca del DOM
    – Rubén
    Commented el 19 feb. 2019 a las 16:18
  • Investigaré acerca de eso, @Rubén, pero mira mi edición de tu respuesta y verás a lo que me refiero.
    – Saco04
    Commented el 19 feb. 2019 a las 16:23

1 respuesta 1

0

El "problema" con la función marcarHijos es que en el HTML 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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.