jquery - jQuery如何根据孩子的检查状态隐藏父Div

Question

我有以下近似 HTML：

<div class="productDiv"><div class="someClass><div><input type="checkbox" class="product"/></div></div></div>
<div class="productDiv"><div class="someClass><div><input type="checkbox" class="product"/></div></div></div>
etc.

我正在尝试在所有产品和仅选定产品之间切换视图。视图是父 div，选中的产品复选框是几个 div 的深度。请问根据孩子的检查状态向父母展示的最佳方式是什么？

这是我的 Jquery，它不工作。

$('.productDiv').hide().filter('.product:input:checked').show();

谢谢！

Answer 1

选择所有选中的输入，然后沿着 dom 树向上到它们的父级：

$('.productDiv').hide();
$('.product:input:checked').parents('.productDiv').show();

Answer 2

创建change事件，然后触发change事件：

$(".product").change(function() {
    this.checked ? $(this).parents(".productDiv").show() : $(this).parents(".productDiv").hide();
}).change();

Answer 3

您可以使用以下 jquery 来实现您想要的：

$('.productDiv').hide().filter(function() {
    return $(this).find('input.product:checked').length > 0;
}).show();

http://jsfiddle.net/peteng/PNySd/

Answer 4

我建议您将next()选择器与toggle()操作一起使用。像那样：

$('.product').next().hide();
$('.product').change(function(){
    $(this).next().toggle();
});

这是完整的小提琴。

Answer 5

$('input:checkbox .product').each(function(){
    if(!($(this).is(':checked'))){
         $(this).closest('.productDiv').hide();
    }
});