Checkbox "Padre"

JosephGalvezG · #1 (**permalink**) 21/08/2012, 15:35

Checkbox Prinicipal

Junto con saludar redacto mi consulta amigos, estoy aplicando un checkbos "padre" a unos checkbox dinamicos que creo de acuerdo al numero de registro en un tabla.
Me funciona que al habiltar checbox padre se marquen los checkbox "Hijo" y viceversa, tambien me funciona que cuando desmarco uno de los checkbox hijo se me descarque automaticamente el checkbox padre, el problema es cuando vuelvo a marcar el checkbox hijo y por lo tanto estando todos los checkbox hijos marcados tendria que marcarse el checkbox hijo.

Esto lo veen a diario en el correo de hotmail y sus checkbox de la bandeja de entrada.

Como tendria que hacerlo?el problema es la funcion "seleccionar_filtro"

Código HTML:

<html>
<head>
<script type="text/javascript">
function seleccionar(){ 
for (i=0;i<document.form3.elements.length;i++) 
if(document.form3.elements[i].type == "checkbox") 
if(document.form3.seleccionar1.checked == 1)
document.form3.elements[i].checked=1 
else if(document.form3.seleccionar1.checked == 0)
document.form3.elements[i].checked=0 
}
</script>
<script type="text/javascript">
function seleccionar_filtro(){
if(document.form3.elements[i].type == "checkbox")
if(document.form3.elements[i].checked == 0)
document.form3.seleccionar1.checked = 0

}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
</head>
<body>
<p>
  <?php
include("conec.php");
$link=Conectarse();
$estado="des";
$Sql="select * from clientes where estado='$estado'";
$result=mysql_query($Sql,$link);
$num_registros=mysql_num_rows($result);
?>
</p>
<form id="form3" name="form3" method="post" action="">
  <p><a href="marcar_eliminar.php">Eliminar Marcados</a> <a href="marcar_habilitar.php">Habilitar Marcados</a></p>
  <table border="5" cellspacing="1" cellpadding="1">
    <tr>
      <td>&nbsp;RUT&nbsp;</td>
      <td>&nbsp;Nombre&nbsp;</td>
      <td>&nbsp;direccion&nbsp;</td>
      <td>&nbsp;Email&nbsp;</td>
      <td>Todos <input type="checkbox" id="seleccionar1" name="seleccionar1" onClick="javascript:seleccionar()"></td>
    </tr>
      <?php
   //nuevo
  while($row = mysql_fetch_array($result))
  {
  printf("<tr><td>&nbsp;%s&nbsp;</td>
<td>&nbsp;%s&nbsp;</td>
<td>&nbsp;%s&nbsp;</td>
<td>&nbsp;%s&nbsp;</td>
<td><input type='checkbox' name='checkbox' id='%s' onClick='seleccionar_filtro()'/></td>
</tr>",
$row["rut_cliente"],$row["nombre_cliente"],$row["direccion"],$row["email"],$row["rut_cliente"]);
}
mysql_free_result($result);
?>
</table>
</form>
</body>
</html>

ocp001a · #2 (**permalink**) 21/08/2012, 15:46

No entendí muy bien

Cita:

cuando vuelvo a marcar el checkbox hijo y por lo tanto estando todos los checkbox hijos marcados tendria que marcarse el checkbox hijo

¿Te refieres al checkbox padre?

Si te refieres al padre, podrías recorrer todos los checkbox hijo, y si todos están marcados, marcar el padre, pudiendo distinguir los chekbox por id para saber si es hijo o padre.

JosephGalvezG · #3 (**permalink**) 21/08/2012, 20:41

Cita:

Iniciado por ocp001a

No entendí muy bien

¿Te refieres al checkbox padre?

Si te refieres al padre, podrías recorrer todos los checkbox hijo, y si todos están marcados, marcar el padre, pudiendo distinguir los chekbox por id para saber si es hijo o padre.

si es correcta tu correccion, como los tendria que recorrer?gracias

ocp001a · #4 (**permalink**) 22/08/2012, 11:45

del mismo modo que lo haces, suponiendo que a los checkbox hijos les pones como id "hijo":

Código Javascript:

Ver originalfor (i=0;i<document.form3.elements.length;i++) 
   if(document.form3.elements[i].type == "checkbox") 
        if(document.form3.elements[i].id.indexOf('hijo')>-1)//si el id del checkbox contiene la palabra hijo
              if(document.form3.elements[i].checked==false){//si no esta marcado
                  document.getElementById('padre').checked=false;//desmarcamos el padre. Lo busco por id, tu puedes hacerlo de otra forma egun te convenga
                  return false;
              }
 
}//si llega a este punto es que no encontró ningún hijo desmarcado
 document.getElementById('padre').checked=true;//y marcamos al padre

JosephGalvezG · #5 (**permalink**) 22/08/2012, 16:42

Cita:

Iniciado por ocp001a

del mismo modo que lo haces, suponiendo que a los checkbox hijos les pones como id "hijo":

Código Javascript:

Ver originalfor (i=0;i<document.form3.elements.length;i++) 
   if(document.form3.elements[i].type == "checkbox") 
        if(document.form3.elements[i].id.indexOf('hijo')>-1)//si el id del checkbox contiene la palabra hijo
              if(document.form3.elements[i].checked==false){//si no esta marcado
                  document.getElementById('padre').checked=false;//desmarcamos el padre. Lo busco por id, tu puedes hacerlo de otra forma egun te convenga
                  return false;
              }
 
}//si llega a este punto es que no encontró ningún hijo desmarcado
 document.getElementById('padre').checked=true;//y marcamos al padre

No, no me resulta :(

Dradi7 · #6 (**permalink**) 22/08/2012, 17:10

Puedes hacerlo de la siguiente forma

Código HTML:

Ver original<input type="checkbox" id="root" onclick="allChecked(this);"/> Marcar Todos<br/><br/>
<input type="checkbox" id="node1" name="node" onclick="simpleChecked(this);"/> Children 1<br/>
<input type="checkbox" id="node2" name="node" onclick="simpleChecked(this);"/> Children 2<br/>
<input type="checkbox" id="node3" name="node" onclick="simpleChecked(this);"/> Children 3<br/>
<input type="checkbox" id="node4" name="node" onclick="simpleChecked(this);"/> Children 4<br/>
<input type="checkbox" id="node5" name="node" onclick="simpleChecked(this);"/> Children 5<br/>
<input type="checkbox" id="node6" name="node" onclick="simpleChecked(this);"/> Children 6<br/>
<input type="checkbox" id="node7" name="node" onclick="simpleChecked(this);"/> Children 7<br/>
<input type="checkbox" id="node8" name="node" onclick="simpleChecked(this);"/> Children 8<br/>
<input type="checkbox" id="node9" name="node" onclick="simpleChecked(this);"/> Children 9<br/>
<input type="checkbox" id="node10" name="node" onclick="simpleChecked(this);"/> Children 10<br/>

Código Javascript:

Ver originalfunction allChecked(root){
    var nodes = document.getElementsByName('node');
    var checked = root.checked;
    for(var x = 0; nodes[x]; x++)
         nodes[x].checked = checked;
}
function simpleChecked(node){
    var nodes = document.getElementsByName('node');
    var total = nodes.length;
    var checkeados = 0;
    for(var x = 0; nodes[x]; x++)
         if(nodes[x].checked)
             checkeados++;
    document.getElementById('root').checked = (checkeados == total);   
}

JosephGalvezG · #7 (**permalink**) 23/08/2012, 10:35

Cita:

Iniciado por Dradi7

Puedes hacerlo de la siguiente forma

Código HTML:

Ver original<input type="checkbox" id="root" onclick="allChecked(this);"/> Marcar Todos<br/><br/>
<input type="checkbox" id="node1" name="node" onclick="simpleChecked(this);"/> Children 1<br/>
<input type="checkbox" id="node2" name="node" onclick="simpleChecked(this);"/> Children 2<br/>
<input type="checkbox" id="node3" name="node" onclick="simpleChecked(this);"/> Children 3<br/>
<input type="checkbox" id="node4" name="node" onclick="simpleChecked(this);"/> Children 4<br/>
<input type="checkbox" id="node5" name="node" onclick="simpleChecked(this);"/> Children 5<br/>
<input type="checkbox" id="node6" name="node" onclick="simpleChecked(this);"/> Children 6<br/>
<input type="checkbox" id="node7" name="node" onclick="simpleChecked(this);"/> Children 7<br/>
<input type="checkbox" id="node8" name="node" onclick="simpleChecked(this);"/> Children 8<br/>
<input type="checkbox" id="node9" name="node" onclick="simpleChecked(this);"/> Children 9<br/>
<input type="checkbox" id="node10" name="node" onclick="simpleChecked(this);"/> Children 10<br/>

Código Javascript:

Ver originalfunction allChecked(root){
    var nodes = document.getElementsByName('node');
    var checked = root.checked;
    for(var x = 0; nodes[x]; x++)
         nodes[x].checked = checked;
}
function simpleChecked(node){
    var nodes = document.getElementsByName('node');
    var total = nodes.length;
    var checkeados = 0;
    for(var x = 0; nodes[x]; x++)
         if(nodes[x].checked)
             checkeados++;
    document.getElementById('root').checked = (checkeados == total);   
}

No funciona tampoco, gracias

Dradi7 · #8 (**permalink**) 23/08/2012, 12:08

Entonces no entiendo que es lo que quieres realmente el codigo que te puse funciona correctamente chequeando tanto padre como hijo

Mira aqui el ejemplo

http://jsfiddle.net/tKbQ8/1/

Entonces si no es eso que es lo que quieres realmente