jQuery共通の親を基にしたコンテンツの表示/非表示

Question

私はこの繰り返しHTMLコードを持っています。

<div id="id1" class="questio"> 
    <input type="checkbox" class="c1"> 
    <div class="c2">Content</div> 
</div> 

<div id="id2" class="questio">  
    <input type="checkbox" class="c1"> 
    <div class="c2">Another Content</div> 
</div> 

<div id="id3" class="questio"> 
    <input type="checkbox" class="c1"> 
    <div class="c2">Another Content</div>  
</div> 

希望挙動は/各セクションのshowのdiv C2のコンテンツを非表示にすることである独立 input.c1に基づいてチェックするかどうか：

if ($(".c1").is(":checked")) {  
    $('.c2').show(); 
} 

私はこのようなsomethigを試みたが、私はできません上に行く：

$("input.c1").each(function() { 
    var parent1 = $(this).closest('questio');  
    if ($(this).is(":checked")) { 
     /// ?? 
    } 
}); 

Answer 1

あなたはかなり接近していました。

//you can find the c1's that are checked 
$(".c1:checked").each(function() { 
    //you can then find their parent questio (with the '.' for the selector) 
    //then find the related c2 and show it. 
    $(this).closest('.questio').find('.c2').show(); 
}); 

あなたのマークアップを与えられたのに、あなたはCSSで完全にこれを行うことができます。

.questio .c1:not(:checked) + .c2 { 
 
    display: none; 
 
}

<div id="id1" class="questio"> 
 
    <input type="checkbox" class="c1"> 
 
    <div class="c2">Content</div> 
 
</div> 
 

 
<div id="id2" class="questio"> 
 
    <input type="checkbox" class="c1"> 
 
    <div class="c2">Another Content</div> 
 
</div> 
 

 
<div id="id3" class="questio"> 
 
    <input type="checkbox" class="c1"> 
 
    <div class="c2">Another Content</div> 
 
</div>

Answer 2

はこれを試してみてください：

var div1 = $("id1"); 
var c2OfDiv1 = div1.find(".c2"); 
c2OfDiv1.hide(); //or c2OfDiv1.show(); 

Answer 3

クリックする要素を参照するにはthisを使用する必要があります。そうしないと、必要のない要素が多すぎます。

$('input.c1').click(function() { 
 
    $(this).next('div.c2').toggle($(this).is(":checked")) 
 
})

.c2 { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="id1" class="questio"> 
 

 
    <input type="checkbox" class="c1"> 
 
    <div class="c2">Content</div> 
 

 
</div> 
 

 
<div id="id2" class="questio"> 
 

 
    <input type="checkbox" class="c1"> 
 
    <div class="c2">Another Content</div> 
 

 
</div> 
 

 
<div id="id3" class="questio"> 
 

 
    <input type="checkbox" class="c1"> 
 
    <div class="c2">Another Content</div> 
 

 
</div>

Answer 4

あなたは（親を使用することができます）、この短い手のように：

$(".c1").on('change', function() { 
 
    var parent = $(this).parent().find('.c2'); 
 
    parent[$(this).is(":checked") ? "show" : "hide"](); 
 
});

.c2 { 
 
    display:none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="id1" class="questio"> 
 

 
    <input type="checkbox" class="c1"> 
 
    <div class="c2">Content</div> 
 

 
</div> 
 

 
<div id="id2" class="questio"> 
 

 
    <input type="checkbox" class="c1"> 
 
    <div class="c2">Another Content</div> 
 

 
</div> 
 

 
<div id="id3" class="questio"> 
 

 
    <input type="checkbox" class="c1"> 
 
    <div class="c2">Another Content</div> 
 

 
</div>