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>

Answer 2

please check fiddle

    $('.checkbox').on('click', function () {

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

    var typen = '';
    $(".checkbox").each(function () {
        var type = $(this).data('type');
        if ($(this).hasClass('checkbox checked')) {
            typen = typen + ',' + type;
        }

    });

    if (typen.length > 0) {
        typen = typen.substring(1, typen.length);
    }

    $('.answer').val(typen);

});

Answer 3

在那里添加值之前再做一次检查：

$('.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 if (!new RegExp("\,?" + type + "\,?").test(initial)) {
        answer.val(initial + ',' + type);
    }
});

.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>

Answer 4

检查输入是否有checked类：

if($(this).hasClass('checked'))
        return;

决赛：

$('.checkbox').on('click', function() {
    if($(this).hasClass('checked'))
        return;//Stop the execution of the 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);                   
    }

});

Answer 5

使用jQuery的map函数从所有元素中获取类型数据。然后使用join函数进行组合。

http://jsfiddle.net/xbwocrf3/8/

$('.checkbox').on('click', function() {
    var answer = $('.answer');
    $(this).toggleClass('checked');
    answer.val( $(".checkbox.checked").map(function() {return $(this).data("type")}).get().join(", ") );
});

Answer 6

这个解决方案有点清洁：

http://jsfiddle.net/xbwocrf3/9/ （链接已更新，我之前粘贴错误）

它使用原生复选框
而不是像尝试删除旧值一样努力，而是从头开始重写输入的整个值
项目始终按其自然顺序显示

<强> HTML

<input type="text" class="answer" />

<div>
<input type="checkbox" value="1" name="something" id="something1"/>
<label for="something1">Option #1</label>
</div>

<div>
    <input type="checkbox" value="2" name="something" id="something2"/>
    <label for="something2">Option #2</label>
</div>

<div>
    <input type="checkbox" value="3" name="something" id="something3"/>
    <label for="something3">Option #3</label>
</div>

<div>
    <input type="checkbox" value="4" name="something" id="something4"/>
    <label for="something4">Option #4</label>
</div>

<强> CSS

input[type="checkbox"]{
    display: none;
}
input[type="checkbox"]:checked + label{
    border:2px solid green;
}

<强>的Javascript

$('input[type=checkbox]').on('change', function() {
    var $answer = $(".answer");

    var checked_values = $.map($("input:checked"), function (element){
        return element.value;
    });

    $answer.val(checked_values);       
});

删除输入值jquery

6 个答案: