Ver Mensaje Individual
  #3 (permalink)  
Antiguo 25/11/2013, 22:00
bemitoreya
 
Fecha de Ingreso: marzo-2010
Mensajes: 50
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: cambiar de posicion un checkbox al ser activado

Cita:
Iniciado por Alexis88 Ver Mensaje
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
  1. <div id = "uno">
  2.   <input type = "checkbox" id = "e1" />
  3.   <input type = "checkbox" id = "e2" />
  4.   <input type = "checkbox" id = "e3" />
  5. </div>
  6.  
  7. <div id = "dos">
  8. </div>

Código Javascript:
Ver original
  1. $("input[type='checkbox']").click(function () {
  2.     $(this).clone().appendTo($("#dos"));
  3.     $(this).remove();
  4.   });

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