Concatenar y eliminar texto

[suudobal]

Buenas!

Tengo el siguiente código y una duda que me trae loco:

<div class="checks">

<span id="ch1"></span>
<span id="ch2"></span>
<span id="ch3"></span>
<span id="ch4"></span>

</div>

<input type="hidden" id="checkBot" value="" />

Los span representan un campo checkbox (Por diseño en el navegador simulan un campo checkbox) y necesito enviar los marcados mediante ese campo oculto.

Me gustaría saber de qué manera puedo ir guardando en el campo oculto los valores de los IDs del span correspondiente al clicar sobre él y si vuelvo a pulsar sobre el span, eliminar ese valor del mismo campo oculto.

Gracias!

[suudobal]

¿Nadie me puede echar una mano u orientar con este dilema? :(

[Dafonz]

Código Javascript:

$('.checks span').click(function() {
    var activos = new Array();
    $('.checks span').each(function(ele,ind){
        if($(ele).is(':checked')) activos.push($(ele).attr('id'));
    });
    $('#checkBot').val(activos.join());
});
 

Cuando se pulsa un span ve cuales estan activos y los pone en un array y al ultimo los pone como valor en el input hidden de forma:
1,2,3

Edit. no me habia fijado que no eran checkboxes solo "simulaban", cual es el cambio que hacen al estar "checked"? si se les agrega alguna clase o algo con eso en vez de:
if($(ele).is(':checked')) activos.push($(ele).attr('id')); puedes utilizar .hasClass, o al menos si pudieras decir como se comportan esos "checkboxes"

[suudobal]

Creo que con eso puedo hacer algo, muchas gracias Dafonz!

[kikeking1]

Hace poco tube que hacer algo parecido, por cuestion de diseño no quedaban bien los checkbox por defecto (como sera posible que hoy en dia sigan si poder maquetarse con css, ni siquiera css3 ).

Rebuscando encontre por ahi una solucion que me parecio bastante interesante, y que quiero compartir contigo, pues quizas te sirva tanto como a mi (o a cualquier otro que llege hasta aqui)

basicamente la idea es jugar con los propios checkbox y no con otros elementos.

A cada checkbox le pones un div con clase que tenga el background-image para incluirle el diseño que quieras

Luego añades al checkbox display:block con un tamaño igual que del contenedor (para que lo ocupe todo) y le pones con javascript opacidad a 0 (el mismo hide() de jquery te puede servir).

Por ultimo con javascript cada vez que hagas click al checkbox, cambias la clase del contenedor que lo contiene. Con esta otra clase, lo que harias seria cambiar el background-image, por otra que sea con el diseño del checkbox marcado. (te recomiendo un sprite para esto).

Quizas sea un poquito mas laborio que la otra forma, pero usas directamente los checkbox, por lo tanto a la hora de trabajar con ellos te sera mas comodo, ademas de que un usuario con javascript desactivado, podra seguir completando el formulario (por eso es importante que la opacidad se la añadas con javascript).

Espero que te sirva.

[suudobal]

Interesante opción kike... muchas gracias por compartirlo! Veré qué puedo hacer jeje.

Un saludo