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，而checked产品复选框是几个div的深度。请问基于孩子检查状态显示父母的最佳方式是什么？

这是我的Jquery无效。

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

谢谢！

Answer 1

选择所有选中的输入，然后将dom树上移到其父级：

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

Answer 2

创建更改事件，然后触发更改事件：

$(".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();
});

以下是完整的fiddle。

Answer 5

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

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

5 个答案: