按点击顺序在文本框中显示复选框值 [英] Display checkbox value in textbox in the order of click

问题描述

我是Java语言的新手，我的查询是

Hi I am new to Javascript my query is

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

How to Display the value of Check Box in the order of user clicked

假设我有

Apple
Orange
Pineapple
Mango 

当用户单击以下顺序时，即

when user click the following order i.e

Pineapple
Apple
Mango
Orange

我需要在文本框中以相同的顺序显示 我正在关注链接 但这不符合我单击的顺序，请帮助我.

I need to display in same order in text box i was following link but it does not follow order I clicked please do help me.

脚本

$('.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">

推荐答案

下面是一个示例. 实时演示(单击).

Here's an example of how you could do it. 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);
});

如果要在未选中项目的情况下删除它们并防止重复，则可以执行以下操作: 实时演示(单击).

If you want to remove items when they're unchecked and prevent duplicates, you could do this: 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();
  }
});

这篇关于按点击顺序在文本框中显示复选框值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！