jQuery：将复选框的值添加到输入文本字段答案

【问题标题】：jQuery: Add values of checkboxes to input text fieldjQuery：将复选框的值添加到输入文本字段
【发布时间】：2014-05-21 14:52:59
【问题描述】：

我正在尝试将任何选中复选框的值添加到输入文本字段。这是我的小提琴：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

如果我取消选中这些复选框中的任何一个，则相应的值应该会在输入字段中消失。

我该怎么做？

【问题讨论】：

标签： javascript jquery html checkbox

【解决方案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

【讨论】：

@George 这太棒了，但是如果复选框已经是 checked 怎么办？
@Jonjie 我已经修改了我的答案。当 DOM 准备好时，我们可以在复选框上触发“更改”事件，这将调用我们的功能。

【解决方案2】：

第一个问题是

if($(':checkbox:checked')) {

将始终为真，因为它返回一个 jQuery 对象，而一个对象是一个真值。如果要使用 if，则要检查长度。又名if($(':checkbox:checked').length) {

其次

var fields = $(":checkbox").val();

仅返回第一个元素的值，它返回任何复选框，而不仅仅是选中的复选框。你想循环通过$(':checkbox:checked')

攻击它的一种方法是使用 each 和数组。

$(":checkbox").on('change', function() {
    var total = [];
    $(':checkbox:checked').each( function(){  //find the checked checkboxes and loop through them
        total.push(this.value); //add the values to the array
    });        
    $('#field_results').val(total.join(" "));  //join the array
});

【讨论】：

【解决方案3】：

问题

if($(':checkbox:checked')) 永远是真的
var fields = $(":checkbox").val(); 将给出第一个复选框值

你可以试试这个。

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

<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

【讨论】：

唯一的问题是结尾会有一个额外的空间。简单的修剪可以解决这个问题。

【解决方案4】：

点击一个复选框，遍历选中的输入，附加到一个字符串，然后将它分配给你的文本框：

$(document).ready(function() {
  $("input:checkbox").click(function() {
    var output = "";
    $("input:checked").each(function() {
      output += $(this).val() + " ";
    });
    $("#field_results").val(output.trim());
  });
});

<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

【讨论】：