Question

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

当触发活动类时，它会在bootstrap look复选框下面显示一个div，div包含更多复选框。

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

我会做一个道具（“检查”，“假”）;当bootstrap复选框不是.active时，在较小的复选框上，但是这些是动态生成的的问题出现了更大的问题，并且可能有多个大的自举复选框，它们在它们下面显示一个div其他复选框。

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

出于示例目的，我只有两个大的复选框，其中包含一个隐藏的div，它会在选中大复选框时显示。

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

$('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，并删除其已检查的属性。

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

1 个答案: