0

Estoy realizando una página que me muestra información extensa traída desde una base de datos MySql y mostrada en tablas. Esta información se divide en una sección "padre", un secciones "hijas" que pertenecen a ese padre y dentro de esas hijas, se muestra la información. Todo esto está dividido en <details>

El problema, está en que los "hijos" tendrán un "seleccionar todo", en donde se seleccionarán todos los checkbox que pertenezcan a ese hijo. El código que manejo ahora, me selecciona todos los checkbox que hay:

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="marcar(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>

He publicado mi código con snippet, para que puedan comprobar a qué me refiero.

Sólo necesito que al seleccionar un hijo, todos los checkbox que están adentro de ese hijo, se seleccionen, sin tocar los otros hijos.

El código, es un ejemplo muy similar a mi proyecto real.

1

3 respuestas 3

1

Necesitas contexto. Ya estas pasando el checkbox que fue marcado, solo necesitas buscar el elemento padre y marcar solo los checkbox que se encuentren dentro de el. Algo asi:

function marcar(source) {
    var parent = source.parentElement.parentElement;
  	var checkboxes = parent.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="marcar(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>

1

si ya le estas pasando el this porque volver a buscar los input dentro del documento solo debes buscar al los padres y apartir de ahi buscar a los hijos que sean input
ejemplo:

function marcar(source){
// obtenemos el elemento clickeado con source buscamos a su padre -> <summary> y luego al padre de <summary> que es <details>
// seleccionamos todos los inputs hijos de <details> y los recorremos
var checkboxes = source.parentNode.parentNode.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)
    }
}
}

// no entiendo para que es esta funcion!

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="marcar(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>

0

Espero te sirva el código intente comentarlo lo más que pude. No necesitas crear más cosas

//Primero buscamos todos los input que esten dentro de summay y que sean de primer nivel
var chck_padre = document.querySelectorAll("summary>input");
//Si chck_padre existe y no esta null,  entonces entramos
if(chck_padre != undefined && chck_padre != null)
{
  //Ahora recorremos el arreglo de los padres
  chck_padre.forEach(function (elemento){
    //Asignamos un elemento click a cada elemento checkbox padre
    elemento.onclick = function (){
      ///Ahora siendo una base tu input padre, entonces subimos dos niveles para encontrar a details y apartir de details buscar los elementos hijos checkbox
      var details = elemento.parentElement.parentElement;
      //ahora buscamos los chckbox hijos que estan dentro de deatils
      var chckbox = details.querySelectorAll("input[type='checkbox'][name^='check']");
      //Recorremos estos checkbox hijos
      chckbox.forEach(function (chck_hijo){
        //Verificamos si nuestro elemento padre llamado: elemento esta checked true ó false y le deamos el mismo estado; true o false.
        elemento.checked ? (chck_hijo.checked = true) : (chck_hijo.checked = false);
       }); //Fin chckbox forEach
     } //Fin onclick function 
   }); // Fin chck_padre forEach
}
<details>
	<summary>
		Grupo 1.
	</summary>
	<details>
		<summary>
      <input type="checkbox">
        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">
      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>

4
  • En mi ejemplo, funciona perfectamente y te agradezco por eso, pero en mi proyecto, no. No funciona nada. Creo que me veré obligado a subir todo el código. El problema, es que es es algo extenso.
    – Saco04
    el 19 feb. 2019 a las 21:10
  • sube el código y lo vamos trabajando, esta sencillo, tu súbelo y ya vemos que pedo. el 19 feb. 2019 a las 22:15
  • Ya lo subí en otra pregunta: es.stackoverflow.com/questions/239286/…
    – Saco04
    el 19 feb. 2019 a las 22:48
  • 1
    Volví a intentar con tu código, y esta vez sí me funcionó (no sé qué error cometí la última ve<). te agradezco mucho. Ya califiqué tu respuesta.
    – Saco04
    el 3 mar. 2019 a las 14:22

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.