Как я могу сделать сортируемый список флажков с упорядочением из массива

Question

У меня есть этот HTML-код:

<div id="format">
<ul id="sortable">
<li id="item1">
      <input class="checkbox" id="item1" name="params[checklist][]" value="item1" checked="checked" type="checkbox">
      <label for="item1">Item 1</label>
</li>
<li id="item2">
      <input class="checkbox" id="item2" name="params[checklist][]" value="item2" checked="checked" type="checkbox">
      <label for="item2">Item 2</label>
</li>
<li id="item3">
      <input class="checkbox" id="item3" name="params[checklist][]" value="item3" checked="checked" type="checkbox">
      <label for="item3">Item 3</label>
      </li>
</ul>
</div>
<input name="params[positions]" id="paramspositions" value="item2,item3,item1" class="text_area" size="50" type="text" />

и этот код jquery / ui:

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 < len; v++) {
        rebuild[items[v]] = items[v];
    }

    for (var i = 0, n = IDs.length; i < 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

Это мои проблемы:

• в этих условиях все работает, кроме обновления входного значения при проверке / снятии отметки
• если я удаляю идентификаторы на тегах li, все работает, кроме restoreOrder при загрузке

Как я могу заставить эту работу? В основном мне нужен сортируемый список флажков, чтобы при загрузке страницы порядок списков зависел от массива, а при проверке / снятии отметки и перемещении элементов обновлялось входное значение. Большое спасибо и извините за мой английский.

Answer 1

Я нашел решение. Проблема в том, что li и input имеют один и тот же идентификатор, если я добавлю только подчеркивание в каждом li-идентификаторе, например:

<li id="item1_">
...
<li id="item3_">

после того, как я отредактировал эту строку в jquery функции restoreOrder ():

var itemID = IDs[i];

с этим:

var itemID = IDs[i]+"_";

но теперь есть только одна проблема, если, например, в значении #paramspositions есть только значение 2, как я могу поставить это значение 2 сверху, а остальные снизу?