Question

我正在制作一份时事通讯联系表格，用户可以通过该表格查看他们想要收到的时事通讯。

我想创建一个文本输入，其值将是所有复选框的值，用逗号分隔。

例如：零售，新闻，制造

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

有什么想法吗？

谢谢！

Answer 1

这样的东西？（见demo here）

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

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

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

Answer 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" />

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

- 例如

Answer 4

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

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

使用jQuery更改文本输入值

4 个答案: