Javascript 复选框未绑定到它们在DOM jquery上创建的标记

我创建了一个带有复选框的模式，当选中复选框时，会将其添加到DOM中。几天来，我一直试图解决的问题是，无论复选框是否选中，标记都会添加到DOM中，而不仅仅是在选中时

当取消选中关联的复选框时，我也不知道如何从DOM中删除标记。我的复选框数量最多可以在6处签出，这是我想要的，但是有没有办法最大化父div中的子div数量？这样就有了另一种安全措施，一次最多只能选择6个标签

这里是我的一个小插曲，希望我解释得足够多，不要让它听起来太混乱

下面是我到目前为止写的jquery，我想我在实现我想要的东西的某个地方错过了一步

感谢您抽出时间查看我的代码

// When specilaty is checked, add tag to profile page
$('[name=specialty]').click(function() {
    $newTag = $("<div class='specTag'>" + $(this).attr('value') + "<div class='xOut'>x</div></div>");
    $(this).attr('value');
    $('.Specialties').append($newTag);

    /*  if ($('.Specialties > .specTag').has(('[name=specialty]:checked').attr('value'))) {
        $('.Specialties > .specTag').has((this).txt()).remove();  
        } */

    // Count number of checkboxes selected and display in modal
    var increment = 0;
    $('[name=specialty]:checked').each(function() {
        if (this.checked) {
            increment++;
        } else {
            increment--;
        }
        $('#specCount').html(increment);
    });

    // Disable checkboxes when 6 (maximum) are selected
    $("input[type=checkbox][name=specialty]").click(function() {
        var bol = $("input[type=checkbox][name=specialty]:checked").length >= 6;
        $("input[type=checkbox][name=specialty]").not(":checked").attr("disabled", bol);
    });

    // Create array of checked items - add on checked - remove on uncheck
    specialtyArray = $('[name=specialty]:checked').map(function() {
        return $(this).val();

        // if item is in the array, then remove it from the DOM
        if (jQuery.inArray($('[name=specialty]:checked').val(), specialtyArray) > -1) {}
    });
    console.log(specialtyArray.get());

});

// When Specialties modal closes, uncheck all checked boxes, reset count
$(document.body).on('click', '.close', function() {
    $('.modal-body > #updateSpecForm > .columns').children().removeAttr('checked');
    $('#specCount').html(0);
})

// Fade out specialty tags when x is clicked
$(document.body).on('click', '.xOut', function() {
    $(this).parent().fadeOut('slow');
    $(this).parent().remove();
});

//选中Specility后，将标记添加到配置文件页面
$（'[name=Speciality]'）。单击（函数（）{
$newTag=$（“”+$（this.attr（'value'）+“x”）；
$（this.attr（'value'）；
$（'.Specialties'）。追加（$newTag）；
/*如果（$（'.Specialties>.specTag'）.has（（'[name=Specialties]：选中“）.attr（'value'））{
$（'.Specialties>.specTag'）.has（（this.txt（））.remove（）；
} */
//计算所选复选框的数量并在模式中显示
var增量=0；
$（'[name=speciality]：选中'）。每个（函数（）{
如果（选中此项）{
增量++；
}否则{
增量--；
}
$（'#specCount'）.html（增量）；
});
//选择6（最大值）时禁用复选框
$（“输入[类型=复选框][名称=专业]”）。单击（函数（）{
var bol=$（“输入[类型=复选框][名称=专业]：选中”）。长度>=6；
$（“输入[type=checkbox][name=speciality]”。未（“：选中”）.attr（“禁用”，bol）；
});
//创建选中项的数组-选中时添加-取消选中时删除
specialtyArray=$（'[name=speciality]：选中'）。映射（函数（）{
返回$（this.val（）；
//如果项在数组中，则将其从DOM中删除
if（jQuery.inArray（$（'[name=speciality]：checked'）.val（），specialtyArray）>-1{}
});
log（specialtyArray.get（））；
});
//关闭时，取消选中所有复选框，重置计数
$（document.body）.on（'click'，'.close'，function（））{
$（'.modal body>#updateSpecForm>.columns'）.children（）.removeAttr（'checked'）；
$（'#specCount'）.html（0）；
})
//单击x时淡出专业标签
$（document.body）.on（'click'，'.xOut'，function（）{
$（this.parent（）.fadeOut（'slow'）；
$（this.parent（）.remove（）；
});

试试看

//选中Specility后，将标记添加到配置文件页面
$（'input[name=Speciality]'）。更改（函数（）{
var值=此值；
//如果选中，则添加新项目，否则删除项目。
如果（选中此项）{
var$newTag=$（“”+value+“x”）.attr（'data-id'，value）；
$（'.Specialties'）。追加（$newTag）；
}否则{
//使用与输入值相同的属性值查找要删除的项
$（'.Specialties'）.find（'div.specTag[data id=“'+value+'”）.remove（）
}
//缓存结果，因为它被多次使用
var$checked=$（'input[name=speciality]：checked'）；
//计算所选复选框的数量并在模式中显示
var增量=$checked.length；
$（'#specCount'）.html（增量）；
//选择6（最大值）时禁用复选框
var bol=增量。长度>=6；
//使用prop而不是attr来设置禁用状态
$（“输入[类型=复选框][名称=专业]”）。未（“：选中”）.prop（“禁用”，bol）；
//创建选中项的数组-选中时添加-取消选中时删除
var specialtyArray=$checked.map（函数（）{
返回$（this.val（）；
});
log（specialtyArray.get（））；
});
//关闭时，取消选中所有复选框，重置计数
$（document.body）.on（'click'，'.close'，function（））{
$（'.modal body>#updatespectform>.columns'）.children（）.prop（'checked'，false）；
$（'#specCount'）.html（0）；
})
//单击x时淡出专业标签
$（document.body）.on（'click'，'.xOut'，function（）{
$（this.parent（）.fadeOut（'slow'，function（））{
$（this.remove（）；
});
//取消选中相应的复选框
$（'input[name=Speciality][value=“”+$（this）.closest（'.specTag'）.attr（'data-id'）+'“]）.prop（'checked'，false）
});
.Specialties{
背景色：#FFFFFF；
宽度：350px；
高度：135px；
左边距：249px；
边缘顶部：125px；
排名：0；
位置：绝对位置；
z指数：1；
}
斯佩克塔格先生{
背景色：#51b848；
颜色：#FFFFFF；
字号：200；
字母间距：1px；
字体大小：12px；
宽度：150px；
高度30px；
填充：8px；
位置：相对位置；
左边距：10px；
边缘底部：5px；
边界半径：5px；
显示：内联块；
}
xOut先生{
背景色：#FFFFFF；
宽度：25px；
填充：3倍；
位置：绝对位置；
右：5px；
文本对齐：居中；
颜色：#333333；
顶部：5px；
边界半径：0 3px 3px 0；
光标：指针；
}

新兵训练营


儿童健康


巡回训练


核心培训


自行车/纺纱


跳舞


灵活性/平衡性


膳食计划


男子体能


女子健身


工作小提琴：


//选中Specility后，将标记添加到配置文件页面
$（'[name=Speciality]'）。单击（函数（）{
$newTag=$（“”+$（this.attr（'value'）+“x”）；
$（this.attr（'value'）；
$（'.Specialties'）。追加（$newTag）；
EnableDisableCheck（）；
//创建选中项的数组-选中时添加-取消选中时删除
specialtyArray=$（'[name=speciality]：选中'）。映射（函数（）{
返回$（this.val（）；
// When specilaty is checked, add tag to profile page
$('[name=specialty]').click(function() {

$newTag = $("<div class='specTag'>" + $(this).attr('value') + "<div class='xOut'>x</div></div>");
$(this).attr('value');
$('.Specialties').append($newTag);  

EnableDisableCheck();


// Create array of checked items - add on checked - remove on uncheck
specialtyArray = $('[name=specialty]:checked').map(function(){
    return $(this).val();

    // if item is in the array, then remove it from the DOM
    if (jQuery.inArray($('[name=specialty]:checked').val(), specialtyArray) > -1) { 
    }
});
console.log(specialtyArray.get());

});

// When Specialties modal closes, uncheck all checked boxes, reset count
    $(document.body).on('click', '.close', function () {
    $('.modal-body > #updateSpecForm > .columns').children().removeAttr('checked');
    $('#specCount').html(0);    
})

// Fade out specialty tags when x is clicked
$(document.body).on('click', '.xOut', function () {
    $(this).parent().fadeOut('slow');
    $(this).parent().remove();   
    var text = $(this).parent().text();
    $('[name=specialty]:checked').filter(function () {

        return text.indexOf($(this).val()) > - 1;

    }).removeAttr('checked');
    EnableDisableCheck();
}); 

function EnableDisableCheck(){
if($('[name=specialty]:checked').length >=5)
{
$('[name=specialty]').attr("disabled","disabled");
}
else
{
$('[name=specialty]').removeAttr("disabled");
}
}

var maxChecked = 6;

// use change handler on checkboxes, will get triggered also below in another click handler
var $checkboxes = $('[name=specialty]').change(function() {
    var value = $(this).val();

    if(this.checked ){
        addTag( value);
    }else{
       removeTag( value ); 
    }    
     checkBoxStatus();

});

function removeTag(checkBoxValue){
    /* we stored the checkbox value as data attribute,  use that to filter*/
    $('.specTag').filter(function(){
        return $(this).data('value') === checkBoxValue;
    }).slideUp(function(){
       $(this).remove(); 
    })
}

function addTag( checkBoxValue){
     $newTag = $("<div class='specTag'>" + checkBoxValue + "<div class='xOut'>x</div></div>");
    /* store the value in elment data so we can reference back to checkbox */
    $newTag.data('value', checkBoxValue);
    $('.Specialties').append($newTag);

}
/* use this to both disable and enable checkboxes */
function checkBoxStatus(){
    var limitReached = $checkboxes.filter(':checked').length === maxChecked;
    $checkboxes.not(':checked').prop('disabled',limitReached);    
}

$(document.body).on('click', '.xOut', function () {
    var $element = $(this).parent(),
        $checkbox = $checkboxes.filter(function(){
            return this.value === $element.data('value');
         /* trigger change to remove element and reset disabled checkboxes */
        }).prop('checked',false).change();


});