Question

我正在使用正在从javascript文件填充的Eric Hynds jQuery MultiSelect Widget。如果选中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

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

2 个答案: