JavaScript - Agregar/Quitar elementos de un DIV usando checkboxs

   
Vista:

Agregar/Quitar elementos de un DIV usando checkboxs

Publicado por Leandro (2 intervenciones) el 18/09/2015 04:52:04
Hola, tengo una duda y queria plantearla en este foro ya que me consta por experiencia propia que aqui si se consigue ayuda!

Tengo un DIV que contiene varios checkbox con valores distintos:

1
2
3
4
5
6
7
8
9
10
<div class="items">
  <input type="checkbox" name="checkbox" id="check1" value="-110" />
  -110<br />
   <input type="checkbox" name="checkbox" id="check2" value="-125" />
  -125<br />
   <input type="checkbox" name="checkbox" id="check3" value="-155" />
  -155<br />
   <input type="checkbox" name="checkbox" id="check4" value="-135"/>
  -135<br />
</div>

Y tengo un div que es el que recibe cada valor de cada checkbox. Basicamente lo que quiero hacer es que cada vez que yo marque un checkbox, se agregue una nueva linea en el DIV que recibe los valores de los checkbox sin eliminar o modificar los ya existentes en el DIV, pero sin embargo quiero que cuando yo desmarque un CheckBox se elimine del DIV la linea que se creo con el valor del CheckBox marcado anteriormente y que no se eliminen los demas, unicamente el que se creo cuando se marco por primera vez!

Agradezco su ayuda!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Vainas

Agregar/Quitar elementos de un DIV usando checkboxs

Publicado por Vainas (239 intervenciones) el 19/09/2015 10:53:42
Buenas:

Pero has probado algo? traenos algo de codigo por lo menos...

Yo primero que nada usaria jquery para que sea un poco mas facil.

Lo siguiente es asignarle el evento change a los checkbox para poder identificar que se esta intentando marcar o desmarcar. Ya solo queda crear con append() una nueva entrada en tu div y que esta tenga algun id relacionado con el check para poder borrarla cuando se desmarque el mismo:

Te dejo un ejemplo (implementa tu el eliminar, solo tienes que usar remove() en el id ha remover.

http://jsfiddle.net/6on1w42v/1/

Saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar