如何检查所有并同时切换[重复]

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');
})