0

Esta vez pregunto porque estoy realizando un código que me permita llenar todos los checkbox (un "seleccionar todo"). Lo logré, pero ahora necesito que se llenen los checkbox de un campo específico.

Es decir, seleccinar todo de una sección o de un formulario. Compartiré mi código:

    <form id="form1">
    <input type="checkbox" onclick="marcar(this);">Marcar/Desmarcar Todos
    <hr>
    <input type="checkbox" name="check1" value="valor1" onclick="marcar(this);">Padre<hr>
    <form id=form2>
        <input type="checkbox" name="check1" value="valor1">Hijo 1<br>
        <input type="checkbox" name="check2" value="valor2">Hijo 2<br>
        <input type="checkbox" name="check3" value="valor3">Hijo 3<br>
        <input type="checkbox" name="check4" value="valor4">Hijo 4<br>
    </form>
</form>
<form id="form3">
    <input type="checkbox" onclick="marcar(this);">Marcar/Desmarcar Todos
    <hr>
    <input type="checkbox" name="check1" value="valor1" onclick="marcar(this);">Padre2<hr>
    <form id=form4>
        <input type="checkbox" name="check1" value="valor5">Hijo<br>
        <input type="checkbox" name="check2" value="valor6">Hijo<br>
        <input type="checkbox" name="check3" value="valor7">Hijo<br>
        <input type="checkbox" name="check4" value="valor8">Hijo<br>
    </form>
</form>

Aquí está el JavaScript:

    function marcar(source){
    checkboxes=document.getElementsByTagName('input'); //obtenemos todos los controles del tipo Input
    for(i=0;i<checkboxes.length;i++) //recoremos 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)
        }
    }
}

A lo que me refiero, es que al hacer click en "Marcar/Descarcar Todos", me haga la acción con todos los de abajo, pero al seleccionar "Padre", me seleccione sólo los del formulario "form2", sin que me modifique los demás formularios.


Código anterior mostrado ahora usando Stack Snippet.

function marcar(source) {
  checkboxes = document.getElementsByTagName('input'); //obtenemos todos los controles del tipo Input
  for (i = 0; i < checkboxes.length; i++) //recoremos 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)
    }
  }
}
<form id="form1">
  <input type="checkbox" onclick="marcar(this);">Marcar/Desmarcar Todos
  <hr>
  <input type="checkbox" name="check1" value="valor1" onclick="marcar(this);">Padre
  <hr>
  <form id=form2>
    <input type="checkbox" name="check1" value="valor1">Hijo 1<br>
    <input type="checkbox" name="check2" value="valor2">Hijo 2<br>
    <input type="checkbox" name="check3" value="valor3">Hijo 3<br>
    <input type="checkbox" name="check4" value="valor4">Hijo 4<br>
  </form>
</form>
<form id="form3">
  <input type="checkbox" onclick="marcar(this);">Marcar/Desmarcar Todos
  <hr>
  <input type="checkbox" name="check1" value="valor1" onclick="marcar(this);">Padre2
  <hr>
  <form id=form4>
    <input type="checkbox" name="check1" value="valor5">Hijo<br>
    <input type="checkbox" name="check2" value="valor6">Hijo<br>
    <input type="checkbox" name="check3" value="valor7">Hijo<br>
    <input type="checkbox" name="check4" value="valor8">Hijo<br>
  </form>
</form>

2
  • Agregué tu código usando Stack Snippet. Entre otras ventajas está que se incluye un botón para copiar el código a las respuestas y otro para ejecutar el código sin salir de esta página.
    – Rubén
    Commented el 19 feb. 2019 a las 2:40
  • Wow... Esto resulta bastante útil, la verdad. Interenate. Muchas gracias.
    – Saco04
    Commented el 19 feb. 2019 a las 2:42

1 respuesta 1

2

Me parece que tienes elementos form innecesarios que "complicarían" innecesariamente el uso de selectores, así que los quité, agregué una comillas faltantes y repliqué tu función marcar con un ligero ajuste.

function marcar(source) {
  var checkboxes = document.getElementsByTagName('input'); //obtenemos todos los controles del tipo Input
  for (i = 0; i < checkboxes.length; i++) //recoremos 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++) //recoremos 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)
    }
  }
}
<input type="checkbox" onclick="marcar(this);">Marcar/Desmarcar Todos

<hr>
<input type="checkbox" name="check1" value="valor1" onclick="marcarHijos(this);">Padre
<hr>
<form id="form2">
  <input type="checkbox" name="check1" value="valor1">Hijo 1<br>
  <input type="checkbox" name="check2" value="valor2">Hijo 2<br>
  <input type="checkbox" name="check3" value="valor3">Hijo 3<br>
  <input type="checkbox" name="check4" value="valor4">Hijo 4<br>
</form>

<hr>
<input type="checkbox" name="check1" value="valor1" onclick="marcar(this);">Padre2
<hr>
<form id=form4>
  <input type="checkbox" name="check1" value="valor5">Hijo<br>
  <input type="checkbox" name="check2" value="valor6">Hijo<br>
  <input type="checkbox" name="check3" value="valor7">Hijo<br>
  <input type="checkbox" name="check4" value="valor8">Hijo<br>
</form>

Lo anterior se podría refinar para usar una única función pero para fines de facilitar el seguimiento por parte del OP así lo dejo.

2
  • Ya edité mi pregunta, para que funcione mejor con mi proyecto real, debido a que el código anterior no me funcionó, pero sí se ejecutó correctamente en mi prueba.
    – Saco04
    Commented el 19 feb. 2019 a las 3:24
  • @SantiagoCorreaAguirreSanmar Editaste mi respuesta, no tu pregunta. Aprovecho para agregar que las preguntas de seguimiento deben publicarse como nuevas preguntas, no como ediciones a la pregunta original las cuáles se editan para agregar información relevante con la finalidad de clarificarla o bien para actualizar con respecto a los esfuerzos de búsqueda/investigación realizados. Espero que con esto ahora también te resulte obvio que las respuestas no deben editarse para hacer preguntas de seguimiento, las respuestas sólo deben contener, eso, c/u una respuesta a la pregunta.
    – Rubén
    Commented el 19 feb. 2019 a las 3:32

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.