javascript - Jquery，Html选中复选框时将值追加到文本字段

我有四个复选框的列表，如下所示：

<input type="checkbox" class="checkboxstyle"  id="id_peer_educator" value="Peer Educator"/>Peer Educator<br>
<input type="checkbox" class="checkboxstyle"  id="id_chw" value="CHW"/>CHW<br>
<input type="checkbox" class="checkboxstyle"  id="id_health_provider" value="Health Prvider"/>Health Provider<br>
<input type="checkbox" class="checkboxstyle"  id="id_purchase" value="Purchase"/>Purchase<br>
<input type="text" id="CD_Supplr" class="CD_Supplr" name="CD_Supplr" placeholder=" Suppliers : "/>

前四个是复选框，最后一个是文本框。如何将数据附加到文本字段Suppliers？ （选中该选项后，应将其附加到文本字段Supplier中，如果未选中，则应从文本字段Supplier中删除该值）。

我尝试通过以下方式实现它：

var CD_Supplr = $('#CD_Supplr').val();
var id_peer_educator = $('#id_peer_educator').val();
var id_chw = $('#id_chw').val();
var id_health_provider = $('#id_health_provider').val();
var id_purchase = $('#id_purchase').val();

$('#id_peer_educator').click(function () {
    $('#CD_Supplr').val(CD_Supplr + "," + id_peer_educator;
});

$('#id_chw').click(function () {
    $('#CD_Supplr').val(CD_Supplr + "," + id_chw;
});

但这不起作用，什么是最好的实现方法？

最佳答案

Demo

$('.checkboxstyle').on("change",function ()
{
    var str ="";
    $('.checkboxstyle:checked').each(function()
    {
        str+= $(this).val()+" ";
    });
    $('#CD_Supplr').val(str);

});