取消选中父项复选框(如果未选中所有子项)
Uncheck parent checkbox if all child is unchecked
我已经设置了一个复选框组,但未能实现要求。
如果组内的所有复选框均未选中,则"顶级"复选框应以未选中状态显示。
我这样做的方式与对所有选定的复选框所做的方式相同。我的第三个如果语句不起作用。
我正在尝试满足三个要求:
-
如果未在筛选器分组中选中所有复选框,则顶级筛选器在复选框中显示 ( - )。
-
如果在筛选器分组中选中了所有复选框,则顶级筛选器显示带有复选标记的选定状态。
-
如果未选中组中的所有复选框,则 顶级复选框应以未选中状态显示。
我未能实现最后一句话。
.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
以下更改将解决您的问题,
$("#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','');
}
});
你的第一个条件是隐藏要发生的第三个条件。
试试这个——
$("#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");
}});
相关文章:
- 如何在angularJS中编辑时,如果DB中的值为true,则设置复选框,如果值为false,则取消选中复选框
- 使用Jquery选择或取消选择ListView中的所有复选框
- 使用jquery选中/取消选中单个复选框
- 使用javascript在页面加载时取消选中所有复选框
- (取消)使用单独的复选框激活复选框列表
- jQuery-取消选中复选框
- 单击或取消选中复选框时,如何创建弹出的自定义窗口
- Javascript选中/取消选中所有复选框并将值写入文本区域
- dojo/cbtree取消选中所有复选框并选中选中复选框
- 通过选中和取消选中复选框来添加和删除数组中的值
- 当与之关联的 ng-model 为 false 时,Angularjs 复选框值不会取消选中
- 如何通过jQuery选中所有复选框并在单击一个复选框时取消选择
- 使用Javascript根据组中的值选中或取消选中复选框
- 选中和取消选中 JavaScript 中的复选框
- 可以't取消选中该复选框(取消选中复选框时隐藏内容)
- 在复选框取消选中事件中从HTML下拉列表中删除项目
- 如何使用复选框取消选中来清除单选按钮
- 复选框取消单击事件Javascript
- 选中复选框(取消)时显示另一个文本
- Javascript复选框取消选中其他复选框,反之亦然