使用 jQuery 更改文本输入值

Question

我正在制作新闻通讯联系表，用户可以在该表格中勾选他们希望从中接收新闻通讯的主题。

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

例如：零售、新闻、制造

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

有什么想法吗？

谢谢！

Answer 1

$('#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(', '));
});

-- 例如

Answer 2

是这样的吗？（参见 demo here）

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

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

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

Answer 3

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

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

Answer 4

是这样的吗？

$(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" />

使用 jQuery 更改文本输入值

Change text input value with jQuery

javascript

forms

checkbox

jquery

input