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

変更イベントを作成してから、変更イベントをトリガーします。

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

Answer 2

次のjqueryを使用して、目的を達成できます。

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

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

Answer 3

next()セレクターをtoggle()アクションで使用することをお勧めします。そのように：

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

これが完全なフィドルです。

Answer 4

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