我有一个下拉复选框,我要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:

最佳答案

//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>');
       });
}
})

07-24 09:51
查看更多