ordinare checkbox in base al click

[Kreatore]

Ciao a tutti.

Tramite jquery, devo ordinare una serie di checkbox in base al click su di esse.
Anzi, più che al click su di esse, al click su delle immagini che si relazionano con le checkbox.

Per farlo, avevo pensato ad una serie di variabili che ne tenevano l'ordine, o di usare un campo input per per memorizzare i click, poi guardando online ho trovato una soluzione abbastanza semplice che nell'esempio presentato funziona, ma appena lo trasformo per adattarsi ai miei bisogni.... non va.

Il concetto è molto semplice: recupero in una variabile tutti i checkbox disponibili ed il contenitore degli stessi:

var $wrapper = $("#wrapper"),
    $ch = $('input[type="checkbox"]', $wrapper);

quindi al click sull'immagine, ottengo il checkbox su cui lavorare, lo attivo e lo elimino dalla lista di tutti i checkbox; quindi copio questa lista e aggiungo il checkbox attivo alla fine della lista.

$('img',$wrapper).live('click',function() {
    var $ckb = $(this).next();    //set ckb value
    $ckb.attr('checked', !$ckb.attr('checked'));  //check/uncheck
    $ch = $ch.not($ckb);  //remove from jQuery 'array'

// --- //add to end of jQuery 'array' 4 different method -- NOT WORK
// $ch.push($ckb);
// $ch.live('append',$ckb);
// $ch.add($ckb);
// Array.prototype.push.call($ch, $ckb);

 alert($ch.length); //show how many checkbox are in the list
});

Riesco a fare tutto, tranne aggiungere il checkbox alla fine della lista. Infatti, se chiedo la lunghezza della lista prima di rimuovere il checkbox ottengo il corretto numero degli elementi, mentre se lo faccio dopo ne ottengo uno in meno (quello che ho tolto).
Ho provato con diverse soluzioni ma con nessuna di queste riesco a ottenere un risultato.

Se volete vederlo funzionante lo sto creando su JSFiddle http://jsfiddle.net/cjmJM/9/

Qualcuno di voi ha qualche suggerimento?

[Vindav]

$ch = $ch.add($ckb);

[Kreatore]

grazie, purtroppo non va.

O meglio, aggiunge il checkbox ma non lo aggiunge in fondo alla lista!

Infatti quando vado a recuperare nuovamente tutti i checkbox, quello selezionato dovrebbe inserirlo in fondo alla lista, in realtà lo visualizza nella sua esatta posizione.

[Vindav]

prova cosi:

$('img',$wrapper).live('click',function() {
    var $ckb = $(this).next();    //set ckb value
    $ckb.attr('checked', !$ckb.attr('checked'));  //check/uncheck
    $ch = $($ch).not($ckb);  //remove from jQuery 'array'

// --- //add to end of jQuery 'array' 4 different method -- NOT WORK
$ch = $ch.toArray();
 $ch.push($ckb);
// $ch.live('append',$ckb);
// $ch.add($ckb);
// Array.prototype.push.call($ch, $ckb);

 alert($ch.length); //show how many checkbox are in the list
});

$("input[type=button]", $wrapper).click(function() {
    var str = $($ch).filter(":checked").map(function(i, el) {
        return el.value;
    }).get().join(",");
    $('.value').val(str);
});

[Vindav]

http://jsfiddle.net/cjmJM/10/

[Kreatore]

Grazie.

Ora però, nella tua versione, avendo trasformato $ch in un arrey, quando clicco il pulsante 'serialize' ottengo la posizione del checkbox nell'array e non il suo valore (che invece è quello che mi interessa).

Ho provato con una serie di modifiche, ma finchè $ch rimane un array e non un object, non riesco a recuperare il valore delle checkbox.

[Kreatore]

Ho risolto eliminando completamente i checkbox.

In effetti, perchè affidare ad un secondo elemento, qualcosa che può essere gestito direttamente dall'elemento stesso.

Inoltre in questo modo, riesco a mantenere un ObjectHTML e ad aggiungere a questo l'elemento che mi serve.

Se volete avere un idea di come ho fatto

http://jsfiddle.net/cjmJM/13/

Ora devo solo testarlo nello script che mi serve, perchè il tutto viene caricato via Ajax e già una volta alla prova con ajax tutto ha smesso di funzionare.

Grazie del supporto!