Javascript 按使用jquery检查checbox的顺序显示文本

**我有一个包含复选框列表的表单。我希望在另一个块中按复选框的选择顺序显示与每个复选框对应的一些文本。当我取消选中某个复选框时，该文本应消失，如果我重新选中它，它应显示在现有文本的下方。我已经在这个网站上查了很多问题。到处都有对文本显示的解释，但不是按照复选框被选中的顺序，而是按照复选框本身的顺序。我想使用html和jquery来实现这一点。这方面的任何帮助都是可观的**

您可以将“a”和“b”替换为您的值，也可以通过其他属性检索值

Html代码：

<input type='checkbox' onclick="updateList('a',this)" />
<input type='checkbox' onclick="updateList('b',this)" />

这里有一个简单的例子：

HTML:

JavaScript jQuery：

鉴于OP中的详细信息，这应该是您正在寻找的。基本上，当其中一个输入复选框更改时，我们通过循环每个选中的输入来更新列表。根据您实际想要的文本，您需要修改此示例。对于每个输入，我将考虑在数据属性中单击输入时显示要显示的文本。比如：

苹果

这样，在循环中，您可以抓取每个输入数据文本属性并显示它。

使用具有相同值的id标记和属性数据id的组合，以便连接复选框和文本

HTML:

JQ:

var options = [];
function updateList(obj,source){
    if($(source).attr('checked')){
        options.push(obj);
    }
    else{
        options= $.grep(options, function( a ) {
              return a !== obj;
          });
    }
    console.log(options);
}

<input type="checkbox" value="Apple">Apple</input>
<input type="checkbox" value="Banana">Banana</input>
<input type="checkbox" value="Mango">Mango</input>
<input type="checkbox" value="Orange">Orange</input>
<input type="checkbox" value="Grape">Grape</input>
<ul></ul>

$("input").on("change", function (e) {
    $("ul").html("");
    $("input:checked").each(function () {
        $("ul").append("<li>" + this.value + "</li>");
    });
});

<div id="checkbox_div">
    <input type='checkbox' data-id="#txt-1" />text 1<br/>
    <input type='checkbox' data-id="#txt-2" />text 2<br/>
    <input type='checkbox' data-id="#txt-3" />text 3<br/>
    <input type='checkbox' data-id="#txt-4" />text 4<br/>
</div>
<div id="text">
    <div id="txt-1">text 1</div>
    <div id="txt-2">text 2</div>
    <div id="txt-3">text 3</div>
    <div id="txt-4">text 4</div>
</div>

#text div{display:none}

$('#checkbox_div input[type="checkbox"]').click(function () {
    var $ch = $(this);
    var $id = $ch.data('id');
    if ($ch.is(':checked')) {
        // ensures that the text appears at the end of the list
        $($id).appendTo($('#text'));
        $($id).show();
    } else $($id).hide();

})