如果所有孩子都未选中，请取消选中父复选框答案

【问题标题】：Uncheck parent checkbox if all child is unchecked如果所有孩子都未选中，请取消选中父复选框
【发布时间】：2015-08-27 05:35:50
【问题描述】：

我创建了一个复选框组，但未能实现要求。

如果组内的所有复选框都未选中，则顶级复选框应显示为未选中状态。

我这样做的方式与我为所有选中的复选框所做的方式相同。我的第三个 else if 语句不起作用。

我正在努力满足三个要求：

如果没有在过滤器分组中选中所有复选框，则顶级过滤器在复选框中显示 (-)。
如果在过滤器分组中选中所有复选框，则顶级过滤器显示选中状态并带有复选标记。
如果组中的所有复选框都未选中，则顶层复选框应显示为未选中状态。

最后一句话我没能实现。

JS：

 <script>
      $(".faceted-filters").on("click", "#checkAll", function(){

           $(this).parents(".top-lvl-filter").next(".sub-lvl-filter").find("input[type=checkbox]").prop('checked', $(this).prop('checked')); 
           $(this).removeClass("partially-checked"); 

        });

    $("#collapse-one input").change(function(){
        var a = $("#collapse-one input");
        if(a.length !== a.filter(":checked").length){
            $(this).parents(".sub-lvl-filter").prev().find("input").addClass("partially-checked");
        }
        else if(a.length == a.filter(":checked").length){
            $(this).parents(".sub-lvl-filter").prev().find("input").attr('checked','checked');
            $(this).closest(".composite-filter").find(".top-lvl-filter input").removeClass("partially-checked");
        }
        else if(a.length == a.filter.not(":checked").length){
        $(this).closest(".composite-filter").find(".top-lvl-filter input").removeClass("partially-checked");
    }


    });
    </script>

工作示例：http://codepen.io/anon/pen/PqjJdO

【问题讨论】：

如果a.length 不等于a.filter(":checked").length，这确实意味着它等于到a.filter(":checked").length。所以要么第一个if 条件是true，要么第二个条件是。第三个if 是无法访问的。
很好的发现..但我需要第一个语句来完成要求。如果未在过滤器分组中选中所有复选框，则顶级过滤器会在复选框中显示 (-)。

标签： javascript jquery checkbox

【解决方案1】：

以下更改将解决您的问题，

$("#collapse-one input").change(function(){
var a = $("#collapse-one input");
if(a.length > a.filter(":checked").length && a.filter(":checked").length > 0){

    $(this).parents(".sub-lvl-filter").prev().find("input").addClass("partially-checked");
}
else if(a.length == a.filter(":checked").length){
    $(this).parents(".sub-lvl-filter").prev().find("input").prop('checked','checked');
    $(this).closest(".composite-filter").find(".top-lvl-filter input").removeClass("partially-checked");
}
else if(a.filter(":checked").length < 1){

    $(this).closest(".composite-filter").find(".top-lvl-filter input").removeClass("partially-checked");
    $(this).closest(".composite-filter").find(".top-lvl-filter input").prop('checked','');
}


});

【讨论】：

【解决方案2】：

您的第一个条件是隐藏要发生的第三个条件。

试试这个 -

$("#collapse-one input").change(function(){
    var a = $("#collapse-one input");

  if(a.filter(":checked").length==0){
        $(this).closest(".composite-filter").find(".top-lvl-filter input").removeClass("partially-checked");
  $(this).parents(".sub-lvl-filter").prev().find("input").removeAttr('checked','checked');
  }
    else if(a.length !== a.filter(":checked").length){
        //alert('all checked');
        $(this).parents(".sub-lvl-filter").prev().find("input").addClass("partially-checked");
    }
    else if(a.length == a.filter(":checked").length){
        $(this).parents(".sub-lvl-filter").prev().find("input").attr('checked','checked');
        $(this).closest(".composite-filter").find(".top-lvl-filter input").removeClass("partially-checked");
    }});

【讨论】：