title: how can I Make a sortable checkbox list with ordering from array
body: <p>I've this html code:</p>
  
  <pre><code>&lt;div id="format"&gt;
  &lt;ul id="sortable"&gt;
  &lt;li id="item1"&gt;
        &lt;input class="checkbox" id="item1" name="params[checklist][]" value="item1" checked="checked" type="checkbox"&gt;
        &lt;label for="item1"&gt;Item 1&lt;/label&gt;
  &lt;/li&gt;
  &lt;li id="item2"&gt;
        &lt;input class="checkbox" id="item2" name="params[checklist][]" value="item2" checked="checked" type="checkbox"&gt;
        &lt;label for="item2"&gt;Item 2&lt;/label&gt;
  &lt;/li&gt;
  &lt;li id="item3"&gt;
        &lt;input class="checkbox" id="item3" name="params[checklist][]" value="item3" checked="checked" type="checkbox"&gt;
        &lt;label for="item3"&gt;Item 3&lt;/label&gt;
        &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;input name="params[positions]" id="paramspositions" value="item2,item3,item1" class="text_area" size="50" type="text" /&gt;
  </code></pre>
  
  <p>and this jquery/ui code:</p>
  
  <pre><code>jQuery.noConflict();
  //function that restores the list order from #paramspositions default value
  function restoreOrder() {
      var list = jQuery("#format ul");
      if (list == null) return
  
      var old = jQuery("#paramspositions").val();
      // make array from saved order
      var IDs = old.split(",");
  
      // fetch current order
      var items = list.sortable("toArray");
  
      // make array from current order
      var rebuild = new Array();
      for (var v = 0, len = items.length; v &lt; len; v++) {
          rebuild[items[v]] = items[v];
      }
  
      for (var i = 0, n = IDs.length; i &lt; n; i++) {
  
          // item id from saved order
          var itemID = IDs[i];
  
          if (itemID in rebuild) {
  
              // select item id from current order
              var item = rebuild[itemID];
  
              // select the item according to current order
              var child = jQuery("ul.ui-sortable").children("#" + item);
  
              // select the item according to the saved order
              var savedOrd = jQuery("ul.ui-sortable").children("#" + itemID);
  
              // remove all the items
              child.remove();
  
              // add the items in turn according to saved order
              // we need to filter here since the "ui-sortable"
              // class is applied to all ul elements and we
              // only want the very first!  You can modify this
              // to support multiple lists - not tested!
              jQuery("ul.ui-sortable").filter(":first").append(savedOrd);
          }
      }
  }
  
  jQuery(function() {
  
      jQuery("#sortable").sortable({
          opacity: 0.6,
          update: function(event, ui) {
              aggiornaTesto();
          }
      });
  
      //function that updates #paramspositions value on check/uncheck and on moving checkbox
      function aggiornaTesto() {
          ids = [];
          jQuery("input:checkbox:checked").each(function(n) {
              ids.push(jQuery(this).attr("value"));
          });
          jQuery("#paramspositions").val(ids);
      }
  
      // here, we reload the saved order
      restoreOrder();
      jQuery(".checkbox").button();
      jQuery("#sortable input").click(aggiornaTesto);
  }); // JavaScript Document
  </code></pre>
  
  <p>These are my problems:</p>
  
  <ul>
  <li>in this conditions all works except update input value on check/uncheck</li>
  <li>if I delete ids on li tags all works except restoreOrder on load</li>
  </ul>
  
  <p>How can I make this work? Basically I need a sortable checkbox list, that on loading page the list order depend from an array, and on check/uncheck and moving items its update the input value.
  Thank you very much and sorry for my english.</p>