javascript - 如果选中复选框，则将他的 textValue 附加到另一个 span

Question

我有一个我想要的下拉复选框 get复选框值和 append一个<span>在 <input type="text" class="form-control"> 之后选中复选框时.当复选框未选中时，我想删除附加的跨度。

这是我试过的:

$ ('.chkb:checkbox').click(function(){
  if ($(".chkb").prop('checked') == true){
     var textName = $('.chkb:checked').next( '.txt' ).text();

     $( ".input-append" ).append('<span class="input-group-addon vss"> ' + textName +'</span>');
    //alert(textName);
}
   else{
    $( ".vss" ).remove();
}
})

我的脚本效果不是很好，因为如果我选择更多复选框选项，则会再次为每个选中的元素追加，并且仅在我取消选中最后一个复选框时才删除。

Here is a small fiddle example:

Answer 1

//keep dropdown open
$('.dropdown-menu').on('click', function(e) {
    if($(this).hasClass('drop-down-stay')) {
        e.stopPropagation();
    }
});

//find checkbox span name and insert into appended span
$ ('.chkb:checkbox').click(function(){
  if ($(this).prop('checked')){
     var textName = $(this).next( '.txt' ).text();

     $( ".input-append" ).append('<span class="input-group-addon vss"> ' + textName +'</span>');
    //alert(textName);
}
   else{
    //build again the checked ones   
    $( ".vss" ).remove();
       $ ('.chkb:checkbox:checked').each(function(){                   

     $( ".input-append" ).append('<span class="input-group-addon vss"> ' +  $(this).next( '.txt' ).text()+'</span>');
       });
}
})