jQuery:在输入文本字段中添加复选框的值

Question

我正在尝试将任何选中复选框的值添加到输入文本字段.这是我的小提琴:http://jsfiddle.net/Lf6ky/

$(document).ready(function() {
  $(":checkbox").on('click', function() {
    if ($(':checkbox:checked')) {
      var fields = $(":checkbox").val();
      jQuery.each(fields, function(i, field) {
        $('#field_results').val($('#field_results').val() + field.value + " ");
      });
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="text" id="field_results" /><br>

<input type="checkbox" value="1">1<br>
<input type="checkbox" value="2">2<br>
<input type="checkbox" value="3">3

在这个例子中,我有3个复选框,值为1,2,3.如果我单击所有这些复选框,则输入字段应如下所示:1 2 3

如果我取消选中其中任何一个复选框,那么相应的值应该会在输入字段中消失.

我该怎么做呢？

Answer 1

我已将复选框的集合存储在变量中$checks,然后将处理程序附加到此集合中.在事件处理程序中,我再次获取集合并仅过滤(返回)已检查的复选框.

map()返回包含已检查复选框值的jQuery对象,get()将其转换为标准数组.用空格加入这些值并将它们放在输入中.

$(document).ready(function(){
    $checks = $(":checkbox");
    $checks.on('change', function() {
        var string = $checks.filter(":checked").map(function(i,v){
            return this.value;
        }).get().join(" ");
        $('#field_results').val(string);
    });
});

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

<input type="checkbox" value="1">1<br>
<input type="checkbox" value="2">2<br>
<input type="checkbox" value="3">3