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>