Question

我正在寻找有关如何为表单实现逐步撤消的帮助/想法。我已经能够达到一个撤消事件，但我很难过如何进一步回来。

在我的example中，用户正在列出各种排序。他们选择他们的项目：

<input type="checkbox" id="food1">Bread<br>
<input type="checkbox" id="food2">Milk<br>
<input type="checkbox" id="food3">Juice<br>
<input type="checkbox" id="item1">Paper<br>
<input type="checkbox" id="item2">Pencils<br>
<input type="checkbox" id="item3">Eraser<br>

出现在一个方框中：
<textarea id="text" rows="10" cols="25"></textarea>

使用以下脚本生成列表：

// variable literals
foodtype = {
    food1: "Bread\n",
    food2: "Milk\n",
    food3: "Juice\n"
};

itemtype = {
    item1: "Paper\n",
    item2: "Pencils\n",
    item3: "Eraser\n"
};

// new text
var textbox = $('#text').val();
// old text to revert to
var oldtext = '';

// temporary holder for checkbox id
var choice = null;

// fill textarea with list
function filltext1() {
    if (choice !== null) {
        if (choice.indexOf('food') != -1) {
            textbox += foodtype[choice] + '';
            choice = null;
            $('#text').val(textbox);
        } else if (choice.indexOf('item') != -1) {
            textbox += itemtype[choice] + '';
            choice = null;
            $('#text').val(textbox);
        }
    }
}

// add new selection to list, unless unchecked
$('input:checkbox').change(function () {
    if ($(this).is(':checked')) {
        choice = $(this).attr('id');
        oldtext = textbox;
        filltext1();
    } else {
        $('#text').val(oldtext); // if unchecked, textarea = prior text
        textbox = oldtext; // reset variable to prior text
    }
});

最后一位带来我的文本框，如果取消选中某个项，则返回一步。但是，只有取消选中最新的选择。

异步取消选中框不会删除该项的条目 - 而只是删除最后一个选项。

如何将初始选择链接到可以恢复的状态？或换句话说，有没有办法异步撤消项目的列表进入？如果可能的话，我甚至会对顺序撤销感到满意。

我很感激帮助！

Answer 1

稍微搞砸了之后，我采取了另一种方法。而不是尝试撤消，而是删除每个选中的项目。这允许在列表示例中进行异步删除。

以下是更新的fiddle。

相关的代码更改如下：

else {
        var del = $(this).attr('id'); // set unchecked id
        if (del.indexOf('food') != -1){
            oldtext = textbox.replace(foodtype[del], '');} // delete referenced literal
        else if (del.indexOf('item') != -1){
            oldtext = textbox.replace(itemtype[del], '');} // delete referenced literal            
        textbox = oldtext; // recapture old version
        $('#text').val(oldtext);
    }

Answer 2

我只是重建列表。 “撤消”功能在这里不合适，因为用户不一定以他检查的相同顺序取消选中项目。当我检查面包，检查牛奶，然后取消选中面包（牛奶意外地从列表中删除）时，您当前的示例失败。

// variable literals
var choiceMap = {
    food1: 'Bread',
    food2: 'Milk',
    food3: 'Juice',
    item1: 'Paper',
    item2: 'Pencils',
    item3: 'Eraser'
};

// Container for all the choices currently selected.
var choices = [];

// fill textarea with list
function filltext(choices) {
    var text = choices.join('\n');
    $('#text').val(text);
}

// add new selection to list, unless unchecked
$('input:checkbox').change(function () {
    var
        choiceKey = $(this).attr('id'),
        choice = choiceMap[choiceKey],
        index;
    if ($(this).is(':checked')) {
        choices.push(choice);
    } else {
        // ES5: index = choices.indexOf(choice);
        index = $.inArray(choice, choices);
        choices.splice(index, 1);
    }
    filltext(choices);
});

Fiddle.

或者，您可以在文本框中搜索要删除的项目并将其子串。但是，如果用户要编辑该框的内容，您将无法找到该字符串，或者您可能会找到错误的字符串（例如，如果您有“App”和“Apple”项，则indexOf-ing字符串不起作用，你必须动态构建一个正则表达式。）

Answer 3

    <form>
    <input type="checkbox" id="food1" Bread="Bread" value="Bread"/>Bread<br />
    <input type="checkbox" id="food2" value="Milk"/>Milk<br />
    <input type="checkbox" id="food3" value="Juice"/>Juice<br />
    <input type="checkbox" id="item1" value="Paper"/>Paper<br />
    <input type="checkbox" id="item2" value="Pencils"/>Pencils<br />
    <input type="checkbox" id="item3" value="Eraser"/>Eraser<br />
    <textarea id="text" rows="10" cols="25"></textarea>
    </form>
    <script>
      var $check=$("input");
      var $text=$('textarea');
      $check.change(function(){
         $text.val($check.map(function(){
           if(this.checked){
           return this.value;
         }}).toArray().join('\n'));
      });
    </script>

您应该在复选框中添加值。

http://embed.plnkr.co/f0YlZFGv1kE5lQurPqo5/preview

逐步撤消表单的历史记录

3 个答案: