jQuery/js 删除动态创建的复选框

Question

我正在使用从 javascript 文件填充的 Eric Hynds jQuery MultiSelect 小部件。如果选中 Main，则会创建一个复选框，并在“Main”复选框下附加标签。如果未选中相应的 Main ，我如何将其设置为删除动态创建的复选框的位置？请看我的小提琴来说明我的问题http://jsfiddle.net/3u7Xj/76/

$(document).ready(function() {
    $(".multiselect").multiselect({
        header: "Choose up to 5 areas total",
        click: function (event, ui) {
             var number1=$("#dropdown1").children(":checked").length,
                number2=$("#dropdown2").children(":checked").length;

            if (ui.checked && ((number1 + number2 >=2) || $(this).children(":checked").length >= 2)) {
                return false;
            }

            var lbl = ui.value;
            if(ui.checked){
                var ctrl = '<input type="checkbox" name="chk" checked="checked" class="chk" id="'+lbl+'">';
                $("[id^=Main]:checked").each(function(){
                    $(this).nextAll('.holder:first').append('<div>'+ctrl+lbl+'</div>');    
                });
            }
            else {
                $("[id^=Main]:checked").each(function(){
                    $(this).nextAll('.holder:first').find('div input[id="'+lbl+'"]').parent().remove();
                });
            }

        },
        selectedList:5
    });
});

这样的？

$("[id^=id]:checked",false).each(function(){
    $(this).nextAll('.holder:first').find('div input[id="'+lbl+'"]').parent().remove();
    }); 

或者

if(ui.checked = false){
            $(this).nextAll('.holder:first').find('div input[id="'+lbl+'"]').parent().remove(); 

          }
            else{};

Answer 1

添加这个怎么样？

$("input[name^=chkMain]").change(function(){
    if($(this).not(':checked')){
        $(this).next('label').next('.holder').html('');
    }
});

http://jsfiddle.net/3u7Xj/77/

这是你的意思吗？

Answer 2

试试这个

else {
    $("[id^=Main]:checked").each(function(){
        $(this).nextAll('.holder:first').find('#' + lbl).parent().remove();
    })
}

Demo

我还添加了一个功能，如果未选中，则取消选中 main 的子项。删除代码

$(".checkers").click(function() {        
    if(!$(this).is(':checked')) {
        $(this).nextAll('.holder:eq(0)').find('div input').attr("checked", this.checked);
    }
});

如果您不想要该功能。如果您想删除复选框，也可以将 .attr("checked", this.checked) 更改为 .parent().remove()

如果您想反其道而行之，即选中复选框，然后选中 Main，您可以使用以下

var checkedOnes = $('#dropdown1').nextAll('.ui-multiselect-menu').find('ul li input:checked');
for(var i = 0; i < checkedOnes.length; i++) {
    var lbl = checkedOnes.eq(i).attr('value');
    var ctrl = '<input type="checkbox" name="chk" checked="checked" class="chk" id="'+lbl+'">';
    $("[id^=Main]:checked").each(function(){
        $(this).nextAll('.holder:first').append('<div>'+ctrl+lbl+'</div>');    
    });
}

Updated Demo