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，除了loadOrder on load

我该如何使这项工作？基本上我需要一个可排序的复选框列表，在加载页面上，列表顺序取决于数组，并且在检查/取消选中和移动项目时，它会更新输入值。非常感谢，对不起我的英语。

Answer 1

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

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

我要在restoreOrder（）jquery函数中编辑这一行：

var itemID = IDs[i];

用这个：

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

但现在只有一个问题，如果在#paramspositions值中只有2个值，例如，我如何将这个2值放在最上面，其他值放在最底层？

如何使用数组排序创建可排序的复选框列表

1 个答案: