如何通过数组排序制作可排序的复选框列表

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 标签上的 id，除了在加载时恢复订单之外，所有工作都有效

我怎样才能做到这一点工作？基本上我需要一个可排序的复选框列表，在加载页面上，列表顺序取决于数组，在选中/取消选中和移动项目时，它会更新输入值。 非常感谢你，对我的英语感到抱歉。

Answer 1

我找到了解决方案。问题是 li 和 input 具有相同的 id，如果我在每个 li id 中只添加一个下划线，如下所示：

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

在我在 RestoreOrder() jquery 函数中编辑这一行之后：

var itemID = IDs[i];

用这个：

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

但现在只有一个问题，例如，如果 #paramspositions 值中只有 2 个值，我怎样才能将这 2 个值放在顶部，将其他值放在底部？