Anónimo
Validar checkbox dinámicos
Te pido tu ayuda...
El problema es que quiero activar varios check(hijo) dependiendo del estado de otro check(padre)... Estos check los genera php según la base de datos.. En tipo visual que así.
[] --> Casilla.
[] Modulo 1
[]A
[]B
[]C
[] Modulo 2
[]A
[]B
[]C
En código es al haci
Padre:
<td><input type="checkbox" name="check[]" id="'.$j.'" value="'.$fila['id_modulo'].' " /></td>
'
HIJO:
<td>
<div align="right"><input type="checkbox" id="'.$j.'.'.$i.'" name="permisos[]" value="'.$fila2['id_permiso'].' " /></div>
</td>
por lo tanto un padre tine el id=2
Y sus hijos serán. Hijo 2,1
Hijo 2,2
Hijo 2,3
La finalidad es que cuando cargue la página lo hijos estén en disable, que al seleccionar un padre se activen los hijos y que el padre seleccionado tengo por lo menos un hijo seleccionado te agradecería mucho tu ayuda
El problema es que quiero activar varios check(hijo) dependiendo del estado de otro check(padre)... Estos check los genera php según la base de datos.. En tipo visual que así.
[] --> Casilla.
[] Modulo 1
[]A
[]B
[]C
[] Modulo 2
[]A
[]B
[]C
En código es al haci
Padre:
<td><input type="checkbox" name="check[]" id="'.$j.'" value="'.$fila['id_modulo'].' " /></td>
'
HIJO:
<td>
<div align="right"><input type="checkbox" id="'.$j.'.'.$i.'" name="permisos[]" value="'.$fila2['id_permiso'].' " /></div>
</td>
por lo tanto un padre tine el id=2
Y sus hijos serán. Hijo 2,1
Hijo 2,2
Hijo 2,3
La finalidad es que cuando cargue la página lo hijos estén en disable, que al seleccionar un padre se activen los hijos y que el padre seleccionado tengo por lo menos un hijo seleccionado te agradecería mucho tu ayuda
1 Respuesta
Respuesta de krlosnow
1
1
krlosnow, Mas de 15 años de experiencia en Java, Javascript y HTML
Lo primero, para cada checkbox que crees, ya sea padre o hijo, mete un onclick="clickCheckbox(this)". Mete también un atributo que se llame "idpadre", y le das el valor del id del checkbox que sea el padre. Créate un atributo "idhijos" con valor "" (vacío). Justo después de crear cada checkbox, invoca a una función javascript que actualice la lista de hijos del checkbox padre. El resultado después de sustituir los valores que vienen de PHP quedaría algo como:
<input type="checkbox" id="checkbox_2,1" idpadre="checkbox_2" idhijos="" value="..." onclick="clickCheckbox(this)"></input>
<script>
var cbpadre = document.getElementById("checkbox_2");
var listahijos = cbpadre.getAttribute("idhijos");
if (listahijos!="") listahijos +=" ";
listahijos += "checkbox_2,1";
cbpadre.setAttribute("idhijos", listahijos);
</script>
La función "estella" es esta:
function clickCheckbox(checkbox){
//busco los hijos y les doy el valor del padre:
var listahijos = checkbox.getAttribute("idhijos");
var arrayHijos = listahijos.split("#");
for (ix=0; arrayHijos[ix]; ix++){
document.getElementById(arrayHijos[ix]).checked=checkbox.checked;
}
//Busco al padre y testeo que algún hijo esté seleccionado. Si no hay ninguno, deschequeo el padre
var cbPadre = document.getElementById(checkbox.getAttribute("idpadre"));
if (cbPadre){
listahijos = cbPadre.getAttribute("idhijos");
arrayHijos = listahijos.split("#");
var checked = false;
for (ix=0; arrayHijos[ix]; ix++){
if (document.getElementById(arrayHijos[ix]).checked){
checked=true;
break;
}
}
cbPadre.checked=checked;
}
}
<span style="font-style: normal;">Esta solución es multinivel, es decir, que vale para cualquier nivel de anidamiento. No he probado el código por lo que puede que haya errores. Verifícalo.</span>
<input type="checkbox" id="checkbox_2,1" idpadre="checkbox_2" idhijos="" value="..." onclick="clickCheckbox(this)"></input>
<script>
var cbpadre = document.getElementById("checkbox_2");
var listahijos = cbpadre.getAttribute("idhijos");
if (listahijos!="") listahijos +=" ";
listahijos += "checkbox_2,1";
cbpadre.setAttribute("idhijos", listahijos);
</script>
La función "estella" es esta:
function clickCheckbox(checkbox){
//busco los hijos y les doy el valor del padre:
var listahijos = checkbox.getAttribute("idhijos");
var arrayHijos = listahijos.split("#");
for (ix=0; arrayHijos[ix]; ix++){
document.getElementById(arrayHijos[ix]).checked=checkbox.checked;
}
//Busco al padre y testeo que algún hijo esté seleccionado. Si no hay ninguno, deschequeo el padre
var cbPadre = document.getElementById(checkbox.getAttribute("idpadre"));
if (cbPadre){
listahijos = cbPadre.getAttribute("idhijos");
arrayHijos = listahijos.split("#");
var checked = false;
for (ix=0; arrayHijos[ix]; ix++){
if (document.getElementById(arrayHijos[ix]).checked){
checked=true;
break;
}
}
cbPadre.checked=checked;
}
}
<span style="font-style: normal;">Esta solución es multinivel, es decir, que vale para cualquier nivel de anidamiento. No he probado el código por lo que puede que haya errores. Verifícalo.</span>
Creo que así como lo tienes no correría pues el id que les tengo dato va cambiando ... perdón se mepaso decirte en el primer mensaje.
[] --> Casilla.
[] Modulo 1
[]A
[]B
[]C
[] Modulo 2
[]A
[]B
[]C
Los id quedarían así:
1
1.1
1.2
1.3
2
2.1
2.2
2.3
Asta n cantidad de check según lo que téngala bases de datos
[] --> Casilla.
[] Modulo 1
[]A
[]B
[]C
[] Modulo 2
[]A
[]B
[]C
Los id quedarían así:
1
1.1
1.2
1.3
2
2.1
2.2
2.3
Asta n cantidad de check según lo que téngala bases de datos
Efectivamente, el código PHP para asignar dinámicamente los ID's de los menús lo he omitido. Como te pongo en el post, es un ejemplo de cómo quedaría un nodo después de sustituir los valores PHP. De tu parte queda meter el bucle anidado para ir construyendo los nodos, y sustituir en el código que te he pasado los ID's y valores dinámicos.
La verdad ya le estuve metindo a tu código y pues nada más no me queda de echo marca error en la primera linea.
var cbpadre =document...
ya que cbpadre devuelve un null;
Le hice los cambhios que me dijiste y nada ...
Si me podrías dar un poco más de tu ayuda estaría eternamente agradeido si no ´pues igual ya que me has ayudado mucho..
De antemano gracias
var cbpadre =document...
ya que cbpadre devuelve un null;
Le hice los cambhios que me dijiste y nada ...
Si me podrías dar un poco más de tu ayuda estaría eternamente agradeido si no ´pues igual ya que me has ayudado mucho..
De antemano gracias
Pásame la página PHP que tienes en pruebas y le echo un vistazo. Me vendría bien también el HTML resultante. Con esas dos cosas te podría ayudar a saber por qué no te funciona.
Esta es mi función que genera los checks
<?php
function Seleccionar_Permisos($dato)
{
$lista='';
$Query='SELECT * FROM modulos';
$Resultado=$this->EjecutarQuery($Query);
$j=0;
$k=0;
while($fila=mysql_fetch_array($Resultado))
{ $j=$j+1;
$Query2='SELECT * FROM permisos';
$Resultado2=$this->EjecutarQuery($Query2);
$lista.='
<table border="1">
';
$lista.='
<tr>
';
$lista.='
<td><input type="checkbox" name="check[]" id="'.$j.'" onclick="validar(this.id)" value="'.$fila['id_modulo'].' " /></td>
';
//onClick="validar(this.id)"
$lista.='
<td><strong>'.$fila['nom_modulo'].'</strong></td>
';
$lista.='
</tr>
';
$tipo=mysql_num_rows($Resultado2);
if ($tipo >=1)
{
$lista.='
<div>';
for ($i=1;$i<=$tipo;$i++)
{
//$k=$k+1;
$fila2=mysql_fetch_array($Resultado2);
$lista.='
<tr>
';
$lista.='
<td></td>
';
$lista.='
<td>
<div align="right"><input type="checkbox" id="'.$j.'.'.$i.'" disabled=true name="permisos[]" value="'.$fila2['id_permiso'].' " /></div>
</td>
';
$lista.='
<td>'.$fila2['tipo_permiso'].'</td>
';
$lista.='
</tr>
';
}
$lista.='</div>
';
}
$lista.='
</table>
';
}
return $lista;
}
}
?>
y esta es el resultado impreso----
<body>
<form id="form1" name="form1" method="post" action="">
<label>
<table border="1">
<tr>
<td><input type="checkbox" name="check[]" id="1" onclick="validar(this.id)" value="6 " /></td>
<td><strong>Modulo 6</strong></td>
</tr>
<div>
<tr>
<td></td>
<td>
<div align="right"><input type="checkbox" id="1.1" disabled=true name="permisos[]" value="1 " /></div>
</td>
<td>Insertar</td>
</tr>
<tr>
<td></td>
<td>
<div align="right"><input type="checkbox" id="1.2" disabled=true name="permisos[]" value="2 " /></div>
</td>
<td>Modificar</td>
</tr>
<tr>
<td></td>
<td>
<div align="right"><input type="checkbox" id="1.3" disabled=true name="permisos[]" value="3 " /></div>
</td>
<td>Eliminar</td>
</tr>
</div>
</table>
<table border="1">
<tr>
<td><input type="checkbox" name="check[]" id="2" onclick="validar(this.id)" value="10 " /></td>
<td><strong>modulo 10</strong></td>
</tr>
<div>
<tr>
<td></td>
<td>
<div align="right"><input type="checkbox" id="2.1" disabled=true name="permisos[]" value="1 " /></div>
</td>
<td>Insertar</td>
</tr>
<tr>
<td></td>
<td>
<div align="right"><input type="checkbox" id="2.2" disabled=true name="permisos[]" value="2 " /></div>
</td>
<td>Modificar</td>
</tr>
<tr>
<td></td>
<td>
<div align="right"><input type="checkbox" id="2.3" disabled=true name="permisos[]" value="3 " /></div>
</td>
<td>Eliminar</td>
</tr>
</div>
</table>
<table border="1">
<tr>
<td><input type="checkbox" name="check[]" id="3" onclick="validar(this.id)" value="12 " /></td>
<td><strong>Modulo 12</strong></td>
</tr>
<div>
<tr>
<td></td>
<td>
<div align="right"><input type="checkbox" id="3.1" disabled=true name="permisos[]" value="1 " /></div>
</td>
<td>Insertar</td>
</tr>
<tr>
<td></td>
<td>
<div align="right"><input type="checkbox" id="3.2" disabled=true name="permisos[]" value="2 " /></div>
</td>
<td>Modificar</td>
</tr>
<tr>
<td></td>
<td>
<div align="right"><input type="checkbox" id="3.3" disabled=true name="permisos[]" value="3 " /></div>
</td>
<td>Eliminar</td>
</tr>
</div>
</table>
<input name="Asignar" type="submit" id="Asignar" value="Asignar" onclick="validar(this.form1)"/>
</label>
<label>
<input type="hidden" name="id" value="99"/>
</label>
<label></label>
</form>
</body>
y asi se ve el php antes de imprimir:
<?php
include_once('clases/BD/conexion.php');
include_once('clases/Negocios/Modulos.php');
$nombre=$_REQUEST['nombre'];
$id=$_REQUEST['id'];
$ObjModulos= new Modulos();
$Resultado=$ObjModulos->Seleccionar_Permisos($_REQUEST['id']);
echo 'Al usuario '.$nombre.' Le puede Asignar los siguientes modulos';
//echo $Resultado;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<label><?php echo $Resultado; //Operaciones_Crear_Modulos.php?>
<input name="Asignar" type="submit" id="Asignar" value="Asignar" onclick="validar(this.form1)"/>
</label>
<label>
<input type="hidden" name="id" value="<?php echo $id;?>"/>
</label>
<label></label>
</form>
</body>
</html>
<?php
function Seleccionar_Permisos($dato)
{
$lista='';
$Query='SELECT * FROM modulos';
$Resultado=$this->EjecutarQuery($Query);
$j=0;
$k=0;
while($fila=mysql_fetch_array($Resultado))
{ $j=$j+1;
$Query2='SELECT * FROM permisos';
$Resultado2=$this->EjecutarQuery($Query2);
$lista.='
<table border="1">
';
$lista.='
<tr>
';
$lista.='
<td><input type="checkbox" name="check[]" id="'.$j.'" onclick="validar(this.id)" value="'.$fila['id_modulo'].' " /></td>
';
//onClick="validar(this.id)"
$lista.='
<td><strong>'.$fila['nom_modulo'].'</strong></td>
';
$lista.='
</tr>
';
$tipo=mysql_num_rows($Resultado2);
if ($tipo >=1)
{
$lista.='
<div>';
for ($i=1;$i<=$tipo;$i++)
{
//$k=$k+1;
$fila2=mysql_fetch_array($Resultado2);
$lista.='
<tr>
';
$lista.='
<td></td>
';
$lista.='
<td>
<div align="right"><input type="checkbox" id="'.$j.'.'.$i.'" disabled=true name="permisos[]" value="'.$fila2['id_permiso'].' " /></div>
</td>
';
$lista.='
<td>'.$fila2['tipo_permiso'].'</td>
';
$lista.='
</tr>
';
}
$lista.='</div>
';
}
$lista.='
</table>
';
}
return $lista;
}
}
?>
y esta es el resultado impreso----
<body>
<form id="form1" name="form1" method="post" action="">
<label>
<table border="1">
<tr>
<td><input type="checkbox" name="check[]" id="1" onclick="validar(this.id)" value="6 " /></td>
<td><strong>Modulo 6</strong></td>
</tr>
<div>
<tr>
<td></td>
<td>
<div align="right"><input type="checkbox" id="1.1" disabled=true name="permisos[]" value="1 " /></div>
</td>
<td>Insertar</td>
</tr>
<tr>
<td></td>
<td>
<div align="right"><input type="checkbox" id="1.2" disabled=true name="permisos[]" value="2 " /></div>
</td>
<td>Modificar</td>
</tr>
<tr>
<td></td>
<td>
<div align="right"><input type="checkbox" id="1.3" disabled=true name="permisos[]" value="3 " /></div>
</td>
<td>Eliminar</td>
</tr>
</div>
</table>
<table border="1">
<tr>
<td><input type="checkbox" name="check[]" id="2" onclick="validar(this.id)" value="10 " /></td>
<td><strong>modulo 10</strong></td>
</tr>
<div>
<tr>
<td></td>
<td>
<div align="right"><input type="checkbox" id="2.1" disabled=true name="permisos[]" value="1 " /></div>
</td>
<td>Insertar</td>
</tr>
<tr>
<td></td>
<td>
<div align="right"><input type="checkbox" id="2.2" disabled=true name="permisos[]" value="2 " /></div>
</td>
<td>Modificar</td>
</tr>
<tr>
<td></td>
<td>
<div align="right"><input type="checkbox" id="2.3" disabled=true name="permisos[]" value="3 " /></div>
</td>
<td>Eliminar</td>
</tr>
</div>
</table>
<table border="1">
<tr>
<td><input type="checkbox" name="check[]" id="3" onclick="validar(this.id)" value="12 " /></td>
<td><strong>Modulo 12</strong></td>
</tr>
<div>
<tr>
<td></td>
<td>
<div align="right"><input type="checkbox" id="3.1" disabled=true name="permisos[]" value="1 " /></div>
</td>
<td>Insertar</td>
</tr>
<tr>
<td></td>
<td>
<div align="right"><input type="checkbox" id="3.2" disabled=true name="permisos[]" value="2 " /></div>
</td>
<td>Modificar</td>
</tr>
<tr>
<td></td>
<td>
<div align="right"><input type="checkbox" id="3.3" disabled=true name="permisos[]" value="3 " /></div>
</td>
<td>Eliminar</td>
</tr>
</div>
</table>
<input name="Asignar" type="submit" id="Asignar" value="Asignar" onclick="validar(this.form1)"/>
</label>
<label>
<input type="hidden" name="id" value="99"/>
</label>
<label></label>
</form>
</body>
y asi se ve el php antes de imprimir:
<?php
include_once('clases/BD/conexion.php');
include_once('clases/Negocios/Modulos.php');
$nombre=$_REQUEST['nombre'];
$id=$_REQUEST['id'];
$ObjModulos= new Modulos();
$Resultado=$ObjModulos->Seleccionar_Permisos($_REQUEST['id']);
echo 'Al usuario '.$nombre.' Le puede Asignar los siguientes modulos';
//echo $Resultado;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<label><?php echo $Resultado; //Operaciones_Crear_Modulos.php?>
<input name="Asignar" type="submit" id="Asignar" value="Asignar" onclick="validar(this.form1)"/>
</label>
<label>
<input type="hidden" name="id" value="<?php echo $id;?>"/>
</label>
<label></label>
</form>
</body>
</html>
Por lo que veo, no has metido el código que te dije para meter un atributo a cada checkbox que se llame "idpadre". Este atributo es crucial para que todo funcione. A los checkbox de primer nivel, asígnales a pelo idpadre=""
$lista.='
<td><input type="checkbox" name="check[]" id="'.$j.'" onclick="validar(this.id)" value="'.$fila['id_modulo'].' " idpadre="" /></td>
';
, y a los checkbox de segundo nivel (los hijos), idpadre debe tomar el valor del id del checkbox padre:
$lista.='
<td>
<div align="right"><input type="checkbox" id="'.$j.'.'.$i.'" disabled=true name="permisos[]" value="'.$fila2['id_permiso'].' " idpadre="'.$j.'"/></div>
</td>
';
Valida mi código porque no soy ningún experto en PHP. Cuando lo tengas funcionando, si te sigue dando problemas, le damos otra vuelta.
$lista.='
<td><input type="checkbox" name="check[]" id="'.$j.'" onclick="validar(this.id)" value="'.$fila['id_modulo'].' " idpadre="" /></td>
';
, y a los checkbox de segundo nivel (los hijos), idpadre debe tomar el valor del id del checkbox padre:
$lista.='
<td>
<div align="right"><input type="checkbox" id="'.$j.'.'.$i.'" disabled=true name="permisos[]" value="'.$fila2['id_permiso'].' " idpadre="'.$j.'"/></div>
</td>
';
Valida mi código porque no soy ningún experto en PHP. Cuando lo tengas funcionando, si te sigue dando problemas, le damos otra vuelta.
Sigue sin jalar.
Por un momento pensé que podría ser por mi formulario lo de anidación docuement.get...('parametro')
Por lo que lo cambie popr document.form1.get...(parámetro).. pero no era eso
solo dice que cbpadre is null osea la primera linea del js
lo probé con ls autoincrementables y con el checkbox_2 y nada de nada
Por un momento pensé que podría ser por mi formulario lo de anidación docuement.get...('parametro')
Por lo que lo cambie popr document.form1.get...(parámetro).. pero no era eso
solo dice que cbpadre is null osea la primera linea del js
lo probé con ls autoincrementables y con el checkbox_2 y nada de nada
Como te dije, tienes que meter en tu PHP el código para que genere el atributo cbpadre. Si no lo creas en la PHP, por supuesto que en el HTML resultante no lo va a encontrar.
Investiga por esa vía, y espero que lo soluciones. No voy a poder ayudarte mucho ahora porque estoy de vacaciones y me conecto muy poco.
Investiga por esa vía, y espero que lo soluciones. No voy a poder ayudarte mucho ahora porque estoy de vacaciones y me conecto muy poco.
- Compartir respuesta
- Anónimo
ahora mismo