按单击顺序在文本框中显示复选框值

Question

您好我是Javascript新手，我的查询是

如何按用户点击的顺序显示复选框的值

假设我有

Apple
Orange
Pineapple
Mango 

当用户点击以下订单时，即

Pineapple
Apple
Mango
Orange

我需要在文本框中以相同的顺序显示 我正在关注链接  但它不按照我点击的顺序请帮助我。

SCRIPT

$('.check').click(function () {
    alert("subhash");
    $("#text").val('');
    $(".check").each(function () {
        if ($(this).prop('checked')) {
            $("#text").val($("#text").val() + $(this).val());
        }
    });
});

HTML

 <div id="checkboxes"> <b>Apple
<input type="checkbox" name="Apple" class="check" value="1"></b> <b>Orange
<input type="checkbox" name="Orange" class="check" value="2"></b> <b>Banana
<input type="checkbox" name="Banana" class="check" value="3"></b> 
</div> <input type="text" name="text" id="text">

Answer 1

这是一个如何做到这一点的例子。的 Live demo (click).

<强>标记：

  <div id="inputs">
    <input type="checkbox" value="Apple">
    <input type="checkbox" value="Orange">
    <input type="checkbox" value="Pineapple">
    <input type="checkbox" value="Mango">
  </div>
  <ul id="results"></ul>

<强> JavaScript的：

$('#inputs input').change(function() {
  $li = $('<li></li>');
  $li.text(this.value);
  $('#results').append($li);
});

如果要在取消选中项目时删除项目并防止重复，可以执行以下操作： Live demo (click).

$('#inputs input').change(function() {
  if (this.checked) {
    $li = $('<li></li>');
    $li.text(this.value);
    $('#results').append($li);
  }
  else {
    $('li:contains('+this.value+')', '#results').remove();
  }
});