我有一个下拉复选框,我要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>');
});
}
})