javascript - 删除输入值jquery

Question

每次我点击一个选项时，他的数据类型应该出现在输入中。

但我希望如果该值已经在输入的 .val 中，则不应再出现，如果我单击两次，我想从输入中删除数据类型。

这是我的 Jsfiddle:

$('.checkbox').on('click', function () {
        var type = $(this).data('type'),
                answer = $('.answer'),
                initial = $('.answer').val();

        $(this).toggleClass('checked');

        if (answer.val().length === 0) {
            answer.val(type);
        } else {
            answer.val(initial + ',' + type);
        }


    });

http://jsfiddle.net/xbwocrf3/

谢谢!

Answer 1

一种解决方案是使用 jquery map :

$('.checkbox').on('click', function() {
  $(this).toggleClass('checked');
  //save the values of checked in an array
  var answerValues = $(".checkbox.checked").map(function() {
    return $(this).data("type");
  }).get();

  //update input text with this values
  $(".answer").val(answerValues);
});

.checkbox.checked {
  border: 2px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="answer" />

<div class="checkbox" data-type="1">Option #1</div>
<div class="checkbox" data-type="2">Option #2</div>
<div class="checkbox" data-type="3">Option #3</div>
<div class="checkbox" data-type="4">Option #4</div>