使用 jQuery 更改文本输入值 [关闭]答案

【问题标题】：Change text input value with jQuery [closed]使用 jQuery 更改文本输入值 [关闭]
【发布时间】：2015-01-20 17:12:07
【问题描述】：

我正在制作一个时事通讯联系表，用户可以在该表单中查看他们希望从中接收时事通讯的主题。

我想做一个文本输入，它的值将是所有选中框的值，用逗号分隔。

例如：零售、新闻、制造

我希望它是动态的，当用户选中一个框时，它会同时出现在文本输入中，当用户取消选中该框时，它也会同时消失，所以我认为 jQuery 是最简单的反正我就是不知道怎么弄。

有什么想法吗？

谢谢！

【问题讨论】：

那么当你第一次开始时，你在哪里卡住了？
我知道如何让它只获得一个复选框值，但不能获得很多并用逗号分隔
到目前为止您尝试过什么？你被困在哪里了？您是否有一些与此相关的代码？
JQuery Add Multiple Check Action Values (of Checkboxes) to Input Text的可能重复
对不起，我真的在问之前搜索了解决方案，但找不到。但是，是的，它是重复的：/

标签： javascript jquery forms checkbox input

【解决方案1】：

这样的？（见demo here）

$('input').on('change', function(){
   var res = "";

   $('input:checked').each(function(){
       res += $(this).val()+", ";
   });

   res = res.slice(0,-2);
   $('#result').text(res);
});

【讨论】：

通过必要的调整，它就像一个魅力！谢谢！

【解决方案2】：

这样的？

$(document).ready(function() {
    $('.check').on('change', function() {
        var displayVal = '';
        $('.check:checked').each(function() {
            displayVal += $(this).val() + ', ';
        });
        displayVal = displayVal.slice(0,-2);
        $('.display').val(displayVal);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" class="check" value="blue"/> blue<br/>
<input type="checkbox" class="check" value="red"/> red<br/>
<input type="checkbox" class="check" value="white"/> white<br/>
<br/>
<input type="text" class="display" />

【讨论】：

【解决方案3】：

$('#my-form').on('change', 'input[type="checkbox"]', function(){
    var vals = [];
    $('#my-form').find('input[type="checkbox"]').each(function(){
         if($(this).checked())){
             vals.push($(this).val());
         }
    });
    $('#my-input').val(vals.join(', '));
});

--例如

【讨论】：

我看到你做了什么并理解它，但不幸的是它对我没有用，我不知道为什么，但感谢你的帮助！

【解决方案4】：

以下将返回一个字符串，其中所有复选框的值用逗号分隔。

var allChecked = $('input[type="checkbox"]:checked').map(function(){
    return this.value
}).get().join(', ');

【讨论】：