javascript - 取消选中特定组的动态生成的复选框

Question

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

当事件类被触发时，它会在 Bootstrap 外观复选框下方显示一个 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);

    }
});

Answer 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 中找到所有选中的复选框，并删除它们的选中属性。