title: Auto check/uncheck the "All" checkbox
body: <p>I am new to JS and I have a page with 2 filters, I am stuck and I am trying to:</p>
  
  <ol>
  <li><p>check automatically the (All) checkbox if every other checkbox of the filter are checked.</p></li>
  <li><p>when a user unchecked a checkbox, automatically uncheck the (All) checkbox.</p></li>
  </ol>
  
  <p>I am trying the following code but it is not really working...</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="filter1"&gt;
  &lt;form action='#'&gt;
  &lt;input type="checkbox" value="all" class="select-all" checked&gt;(All)
  &lt;br&gt;
  &lt;input type="checkbox" value="v1" class="checkboxlistitem" checked&gt;F1: Value1
  &lt;br&gt;
  &lt;input type="checkbox" value="v2" class="checkboxlistitem" checked&gt;F1: Value2
  &lt;br&gt;
  &lt;input type="checkbox" value="v3" class="checkboxlistitem" checked&gt;F1: Value3
  &lt;br&gt;
  &lt;input type="checkbox" value="v4" class="checkboxlistitem" checked&gt;F1: Value4
  &lt;br&gt;
  &lt;input type="submit" value="Apply"&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;div id="filter2"&gt;
  &lt;form action='#'&gt;
  &lt;input type="checkbox" value="all" class="select-all" checked&gt;(All)
  &lt;br&gt;
  &lt;input type="checkbox" value="v1" class="checkboxlistitem" checked&gt;F2: Value1
  &lt;br&gt;
  &lt;input type="checkbox" value="v2" class="checkboxlistitem" checked&gt;F2: Value2
  &lt;br&gt;
  &lt;input type="checkbox" value="v3" class="checkboxlistitem" checked&gt;F2: Value3
  &lt;br&gt;
  &lt;input type="checkbox" value="v4" class="checkboxlistitem" checked&gt;F2: Value4
  &lt;br&gt;
  &lt;input type="submit" value="Apply"&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(".checkboxlistitem").change(function() {
  $(".select-all").prop("checked", $(".checkboxlistitem:checked").length ==    $(".checkboxlistitem").length);});
  </code></pre>
  
  <p>JSFIDDLE:</p>
  
  <p><a href="https://jsfiddle.net/Max06270/5scgbnww/" rel="nofollow">https://jsfiddle.net/Max06270/5scgbnww/</a></p>
  
  <p>Let me know if you need clarifications,
  Thanks in advance,
  Max</p>