如果所有子复选框都未被选中，则取消父复选框的选中状态。

Question

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

如果组内所有复选框都未被选中，则顶层复选框应处于未选中状态。我尝试以与所有已选复选框相同的方式进行操作，但我的第三个 else if 语句无法正常工作。

我正在尝试满足以下三个要求：

1. 如果筛选组内未选择所有复选框，则顶层筛选器显示（-）复选框。 2. 如果筛选组内选择了所有复选框，则顶层筛选器将显示带有勾号的选定状态。 3. 如果组内所有复选框都未被选中，则顶层复选框应处于未选中状态。

我未能达成最后一个要求。

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

- Praveen

---

如果a.length不等于a.filter(":checked").length，那么这意味着它等于a.filter(":checked").length。因此，第一个if条件为true或第二个条件为true。第三个if是无法到达的。 - Regent

发现不错..但我需要第一条语句来完成需求。如果未选择筛选组中的所有复选框，则顶层筛选器在复选框中显示（ - ）。 - Praveen

Answer 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','');
}


});

- Twinkle

Answer 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");
    }});

- Mahesh Jasti