すべてをチェックして同時に切り替える方法

Question

コンテンツを表示/非表示にするチェックボックスがあります。彼らは正常に動作します。しかし、すべてのチェックボックスをオンにすると、すべてのチェックボックスがチェックされますが、コンテンツはもはやトグルしません。私はなぜ、どのようにこれを動作させるのか混乱しています。

私のhtml：

<p><input type="checkbox" class="section-select one">one </p> 
<p><input type="checkbox" class="section-select two">two</p> 
<p><input type="checkbox" class="section-select three">three</p> 
<p><input type="checkbox" class="check-all">check all</p> 
<div id="one">One</div> 
<div id="two">two</div> 
<div id="three">three</div> 

私のjs：

$("input.check-all").change(function(){ 
    $("input.section-select").prop('checked', $(this).prop("checked")); 
}) 

$("input.section-select").change(function(){ 
    var inputClass = $(this).attr("class").split(' ').pop(); 
    var sectionToHide = "#" + inputClass; 
    $(sectionToHide).toggle(); 
}); 

相続人フィドル：https://jsfiddle.net/jawxvc49/

Answer 1

あなたが変更イベントを発射するtrigger()を使用することができます。

$("input.check-all").change(function(){ 
    $("input.section-select").prop('checked', $(this).prop("checked")).trigger('change'); 
})