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

使用$(".chkb")内部点击事件回调函数替换$(this)。目前，您检查click事件回调函数中的所有复选框值。 $(this)是指单击的复选框。因此$(this).prop('checked')将引用最后点击的复选框值。你可以从那里解决你遇到的问题：）

Answer 2

只需在代码中附加下一行点击：

$( ".vss" ).remove();

http://jsfiddle.net/D2RLR/5737/

//find checkbox span name and insert into appended span
$ ('.chkb:checkbox').click(function(){
    $( ".vss" ).remove();
  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();
}
})

Answer 3

尝试

$('.chkb:checkbox').click(function () {
    var items = $('.chkb:checkbox:checked').map(function () {
        return '<span class="input-group-addon vss"> ' + $(this).next('.txt').text() + '</span>'
    }).get();
    $(".input-append .vss").remove()
    $(".input-append").append(items.join(''));
})

演示：Fiddle

Answer 4

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

如果选中复选框，则将其textValue附加到另一个范围中

4 个答案: