取消选中特定组的动态生成的复选框答案

【问题标题】：Uncheck Specific Groups of Dynamically Generated Checkboxes取消选中特定组的动态生成的复选框
【发布时间】：2014-12-19 16:00:46
【问题描述】：

我有一些漂亮的风格化“复选框”，它们实际上由 li span 和 bootstrap glyphicon 组成。当他们被“检查”时，他们会得到一个 .active 类。

当活动类被触发时，它会在引导查看复选框下方显示一个 div，并且该 div 包含更多复选框。

问题是，如果用户选中这些，但取消选中引导复选框，较小的复选框仍将被选中（但隐藏）。如果它们仍然被选中，我的 PHP 后端代码仍然选择它作为检查并将不需要的数据放入数据库中。

我只会做一个 prop("checked", "false");当 bootstrap 复选框不是 .active 时，在较小的复选框上，但是 这些是动态生成的这一事实会带来更大的问题，并且可能有多个大的 bootstrap 复选框在它们下方显示一个 div其他复选框。

足够的描述，这是一个 jsfiddle：http://jsfiddle.net/5fw60gLv/1/

例如，我只有2个大复选框，其中包含一个下面的隐藏div，它会在检查大复选框时显示。

这是我用来显示隐藏的 div 和隐藏显示的 div 的 jQuery 代码（这也应该取消选中复选框）

$('li.level-1-checkbox').click(function () {
    if ($(this).hasClass('active')) {
        $(this).next().fadeIn(300);
    } else {
        $('.level-1-checkbox').find('div').prop('checked', false);
        $(this).next().fadeOut(300);

    }
});

【问题讨论】：

TLDR，格雷戈里。问号在哪里？
在生成时为它们分配一个唯一的类怎么样？类似于 class="parentName-x" 其中 x 是递增值或类似的东西？
@philtune 当较大的复选框未选中时，嵌套在其下方的复选框需要消失并取消选中。但它们是动态生成的，所以它们都有相同的类。
为什么动态生成它们是一个问题？
@j08691 假设我做了 $('.level-2-checkbox').prop('checked', 'false');当顶部复选框未选中时。但这意味着如果我有多个顶部复选框，只需单击其中一个复选框即可取消选中所有复选框，它只需要取消选中嵌套在顶部复选框下方的复选框（因为顶部复选框也是动态生成的，并且它们都有相同的类）

标签： javascript jquery html css checkbox

【解决方案1】：

您可以在隐藏 div 时取消选择这些复选框。因此，用于显示和隐藏 div 的 jQuery 代码将是：

$('li.level-1-checkbox').click( function() {
    if($(this).hasClass('active')) {
        $('.level-1-checkbox').find('div').prop('checked', false);
        $(this).next().fadeOut(300);
    } else {
        $(this).next().fadeIn(300); 
        $(this).next().find('input[type=checkbox]:checked').removeAttr('checked');
    }
});

最后一行将从非活动 div 中找到所有选中的复选框，并删除它们的选中属性。

【讨论】：