[SOLUCIONADO] cambiar de posicion un checkbox al ser activado

bemitoreya · #1 (**permalink**) 22/11/2013, 10:01

hola quiciera ahcer que al activar un checkbox ese mismo se cambiara de pocicion a un div diferente al que ya esta.

este e sel codigo

Código HTML:

<div id="contenedor_checkbox" class="contenedor_checkbox">
<input type="checkbox" id="item_4" name="item_4" value="15892" />
<input type="checkbox" id="item_9" name="item_9" value="1554" />
<input type="checkbox" id="item_16" name="item_16" value="151986" />
<input type="checkbox" id="item_24" name="item_24" value="16479" />
<input type="checkbox" id="item_28" name="item_28" value="23587" />
<input type="checkbox" id="item_37" name="item_37" value="165435" />
</div>


 <div id="imgresp" class="imgresp"> &nbsp; </div>

Al activar un checkbox se tiene que pasar al div "imgresp" y al desactivar volver al div "contenedor_checkbox"

Alguien me podria ayudar con esto porfavor .

Alexis88 · #2 (**permalink**) 24/11/2013, 15:32

Utiliza el método clone para copiar el elemento, luego, con appendTo, insertas el elemento copiado en el nuevo div y, finalmente, eliminas el elemento original con remove.

Código HTML:

Ver original<div id = "uno">
  <input type = "checkbox" id = "e1" />
  <input type = "checkbox" id = "e2" />
  <input type = "checkbox" id = "e3" />
</div>
 
<div id = "dos">
</div>

Código Javascript:

Ver original$("input[type='checkbox']").click(function () {
    $(this).clone().appendTo($("#dos"));
    $(this).remove();
  });

Saludos

bemitoreya · #3 (**permalink**) 25/11/2013, 22:00

Cita:

Iniciado por Alexis88

Utiliza el método [URL="http://api.jquery.com/clone/"][COLOR="Blue"][B]clone[/B][/COLOR][/URL] para copiar el elemento, luego, con [URL="http://api.jquery.com/appendTo/"][COLOR="blue"][B]appendTo[/B][/COLOR][/URL], insertas el elemento copiado en el nuevo div y, finalmente, eliminas el elemento original con [URL="http://api.jquery.com/remove/"][COLOR="blue"][B]remove[/B][/COLOR][/URL].

Código HTML:

Ver original<div id = "uno">
  <input type = "checkbox" id = "e1" />
  <input type = "checkbox" id = "e2" />
  <input type = "checkbox" id = "e3" />
</div>
 
<div id = "dos">
</div>

Código Javascript:

Ver original$("input[type='checkbox']").click(function () {
    $(this).clone().appendTo($("#dos"));
    $(this).remove();
  });

Saludos

Gracias me sirvio de mucho..

Una consulta mas utilizando lo que me comentaste yse algo pero no logro acabarlo aver si me pueden ayudar les comento.

Codigo:

Código HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.10.2.js"></script>

<style type="text/css">
.uno{
    background-color:#0066FF;
    width:250px;
    height:100px;
}

.dos{
    background-color:#0FF;
    width:250px;
    height:100 px;
    float:left;
}

.uno div{
    background-color:#FF0;
    width: 50px;
    height: 50px;
    margin:5px 5px 5px 5px;
    float:left;
}

.dos div{
    background-color:#FF0;
    width: 50px;
    height: 50px;
    margin:5px 5px 5px 5px;
    float:left;
}
</style>

</head>
<body>

<div id = "uno" class="uno">
    <div id="este" class="este">1</div>
    <div id="este" class="este">2</div>
    <div id="este" class="este">3</div>
    <div id="este" class="este">4</div>
</div>
    
<div id = "dos" class="dos">&nbsp;
</div>

<script>
$("div[id='este']").click(function () {
        $(this).clone().appendTo($("#dos"));
		$("#dos > *").attr("id", "square");
        $(this).remove();
});  
/////////////////////////////segungo//////////////////////
$("div[id='square']").click(function () {
        $(this).clone().appendTo($("#uno"));
		$("#uno > *").attr("id", "este");
        $(this).remove();
});     
</script>

</body>
</html>

Explicacion al dar click en cualquiera de los cuadros amarillo se pasa hacia abajo y le cambia la id por "square" hasta ahi todo bien pero lo que quiero ahora es la invesa al dar ckick en cualquier cuedro amarillo se pase asia arriba.

Pero no funciona como lo tengo solo se pasan hacia abajo.

Ejeplo funcionando http://mexware.comyr.com/ejemplo/eje1.php

Alexis88 · #4 (**permalink**) 26/11/2013, 03:13

Pensando en otras formas de hacer esto, di con la siguiente: En lugar de clonar y mover el elemento a otra sección para, finalmente, eliminar el original, basta con moverlo, alterando los valores de su posición.

Código HTML:

Ver original<!DOCTYPE html>
<html lang = "es">
<head>
  <meta charset = "utf-8" />
  <style type = "text/css">
    #uno, #dos {
      width: 12.5em;
      height: 7em;
    }
    
    #uno {
      background: #0f0;
    }
    
    #dos {
      background: #f00;
    }
    
    div {
      display: inline-block;
      width: 5em;
      height: 2em;
      background: yellow;
      text-align: center;
      margin: .5em;
      position: relative;
    }
  </style>
 
</head>
<body>  
  <section id = "uno">
    <div data-level = "1" id = "a"> 1 </div>
    <div data-level = "1" id = "b"> 2 </div>
    <div data-level = "1" id = "c"> 3 </div>
    <div data-level = "1" id = "d"> 4 </div>
  </section>
      
  <section id = "dos"></section>
 
  <script type = "text/javascript" src = "http://code.jquery.com/jquery-1.10.2.js"></script>
  <script type = "text/javascript">
  $("div").click(function () {
    var data = this.getAttribute("data-level");
    
    if (data == 1) this.setAttribute("data-level", 2);
    else this.setAttribute("data-level", 1);
    
    if (this.getAttribute("data-level") == 1)
      $(this).animate({"top": "-=8em"}, 1200);
    else
      $(this).animate({"top": "+=8em"}, 1200);
  });    
  </script>
</body>
</html>

A cada div, le asigné el atributo personalizado data-level, el cual empieza con el valor 1, pero cada vez que le de un clic a cada div, dicho valor cambiará, si era 1, pasará a ser 2 y viceversa, con esto determinaremos si el div se mueve hacia arriba o hacia abajo.

Saludos

JuJoGuAl · #5 (**permalink**) 26/11/2013, 09:09

Cita:

Iniciado por Alexis88

Utiliza el método clone para copiar el elemento, luego, con appendTo, insertas el elemento copiado en el nuevo div y, finalmente, eliminas el elemento original con remove.

Código HTML:

Ver original<div id = "uno">
  <input type = "checkbox" id = "e1" />
  <input type = "checkbox" id = "e2" />
  <input type = "checkbox" id = "e3" />
</div>
 
<div id = "dos">
</div>

Código Javascript:

Ver original$("input[type='checkbox']").click(function () {
    $(this).clone().appendTo($("#dos"));
    $(this).remove();
  });

Saludos

Yo usaria ese mismo metodo para subirlos, es decir, cuando haga clic en el elemento de abajo lo mueva arriba, se podria hacer eso leyendo el estado de cada checkbox? Activado CAPA1 Desactivado CAPA2...

Algo asi...

bemitoreya · #6 (**permalink**) 26/11/2013, 11:24

Cita:

Iniciado por Alexis88

Pensando en otras formas de hacer esto, di con la siguiente: En lugar de clonar y mover el elemento a otra sección para, finalmente, eliminar el original, basta con moverlo, alterando los valores de su posición.

Código HTML:

Ver original<!DOCTYPE html>
<html lang = "es">
<head>
  <meta charset = "utf-8" />
  <style type = "text/css">
    #uno, #dos {
      width: 12.5em;
      height: 7em;
    }
    
    #uno {
      background: #0f0;
    }
    
    #dos {
      background: #f00;
    }
    
    div {
      display: inline-block;
      width: 5em;
      height: 2em;
      background: yellow;
      text-align: center;
      margin: .5em;
      position: relative;
    }
  </style>
 
</head>
<body>  
  <section id = "uno">
    <div data-level = "1" id = "a"> 1 </div>
    <div data-level = "1" id = "b"> 2 </div>
    <div data-level = "1" id = "c"> 3 </div>
    <div data-level = "1" id = "d"> 4 </div>
  </section>
      
  <section id = "dos"></section>
 
  <script type = "text/javascript" src = "http://code.jquery.com/jquery-1.10.2.js"></script>
  <script type = "text/javascript">
  $("div").click(function () {
    var data = this.getAttribute("data-level");
    
    if (data == 1) this.setAttribute("data-level", 2);
    else this.setAttribute("data-level", 1);
    
    if (this.getAttribute("data-level") == 1)
      $(this).animate({"top": "-=8em"}, 1200);
    else
      $(this).animate({"top": "+=8em"}, 1200);
  });    
  </script>
</body>
</html>

A cada div, le asigné el atributo personalizado data-level, el cual empieza con el valor 1, pero cada vez que le de un clic a cada div, dicho valor cambiará, si era 1, pasará a ser 2 y viceversa, con esto determinaremos si el div se mueve hacia arriba o hacia abajo.

Saludos

Discula por no expresarme bien o por no plantear bien el caso pero de esta forma no me sirve ya que son mas articulos

Ejemplo mas concreto http://mexware.comyr.com/ejemplo/eje2/eje1.php

Limito los articulos en este caso 3 con el sigiente codigo

Código HTML:

var num = 0 ;
$("div[id='este']").click(function () {
	if (num == 3){
			return (true);
		}
        $(this).clone().appendTo($("#dos"));
	$("#dos > *").attr("id", "square");
        $(this).remove();
		num++;
});

pero sigo sin poder quitar los articulos del <div id = "dos"> y regresarlos al <div id = "uno">

al pasarlo al div dos le cambio la id por square para poder utilizar el sigiente codigo:

Código HTML:

$("div[id='square']").click(function () {
        $(this).clone().appendTo($("#uno"));
		$("#uno > *").attr("id", "este");
        $(this).remove();
});

Si cambia la id a square pero no ace la funcion para pasarlo al div uno

Alguna sugerencia

bemitoreya · #7 (**permalink**) 27/11/2013, 11:25

Cita:

Iniciado por Alexis88

Pensando en otras formas de hacer esto, di con la siguiente: En lugar de clonar y mover el elemento a otra sección para, finalmente, eliminar el original, basta con moverlo, alterando los valores de su posición.

Código HTML:

Ver original<!DOCTYPE html>
<html lang = "es">
<head>
  <meta charset = "utf-8" />
  <style type = "text/css">
    #uno, #dos {
      width: 12.5em;
      height: 7em;
    }
    
    #uno {
      background: #0f0;
    }
    
    #dos {
      background: #f00;
    }
    
    div {
      display: inline-block;
      width: 5em;
      height: 2em;
      background: yellow;
      text-align: center;
      margin: .5em;
      position: relative;
    }
  </style>
 
</head>
<body>  
  <section id = "uno">
    <div data-level = "1" id = "a"> 1 </div>
    <div data-level = "1" id = "b"> 2 </div>
    <div data-level = "1" id = "c"> 3 </div>
    <div data-level = "1" id = "d"> 4 </div>
  </section>
      
  <section id = "dos"></section>
 
  <script type = "text/javascript" src = "http://code.jquery.com/jquery-1.10.2.js"></script>
  <script type = "text/javascript">
  $("div").click(function () {
    var data = this.getAttribute("data-level");
    
    if (data == 1) this.setAttribute("data-level", 2);
    else this.setAttribute("data-level", 1);
    
    if (this.getAttribute("data-level") == 1)
      $(this).animate({"top": "-=8em"}, 1200);
    else
      $(this).animate({"top": "+=8em"}, 1200);
  });    
  </script>
</body>
</html>

A cada div, le asigné el atributo personalizado data-level, el cual empieza con el valor 1, pero cada vez que le de un clic a cada div, dicho valor cambiará, si era 1, pasará a ser 2 y viceversa, con esto determinaremos si el div se mueve hacia arriba o hacia abajo.

Saludos

Analizando bien el codigo y asiendo unos ajustes consegi lo que queria gracias a tu codigo te agradesco y me cuesta trabajio por que soy algo nuevo en esto
Nuevamente gracias por la ayuda Tema solucionado.

Aqui como quedo el script

Código HTML:

<script type = "text/javascript">
  $("div").click(function () {
    var data = this.getAttribute("data-level");
   

    if (this.getAttribute("data-level") == 1)
	{
	$(this).appendTo('#dos');
	this.setAttribute("data-level", 2);
	}
    else
	{
     $(this).appendTo('#uno');
	 this.setAttribute("data-level", 1);
	}
  });    
  </script>

Alexis88 · #8 (**permalink**) 27/11/2013, 11:37

Es más o menos lo que te iba a proponer, solo que cometí el error de colocar al objeto dentro de appendTo y no al id como lo hiciste. ¡Enhorabuena!

P.D.: Puedes reemplazar a los métodos getAttribute y setAttribute, por el método prop de jQuery.