title: How to uncheck a group of checkboxes when another checkbox is checked
body: <p>I've created a search function on a website I'm developing but I'm stuck on this part. The search function has a list of categories which the user can check or uncheck in order to filter through the items. The options are almost identical to the way <a href="https://www.coursera.org/courses" rel="nofollow">Coursera</a> has implemented their search function. I would like to have all the other checkboxes unchecked when the <strong>All Categories</strong> option is checked and have the <strong>All Categories</strong> checkbox unchecked when anything else is unchecked. That sounds a bit confusing but it's exactly what that website has implemented.</p>
  
  <p>Here's an example of the code:</p>
  
  <pre><code>&lt;div class="filter-grade"&gt;
      &lt;label class="checkbox"&gt;
          &lt;input type="checkbox" id="grade-all" name="grade[]" value="0" checked&gt;&lt;b&gt;All Grades&lt;/b&gt;
      &lt;/label&gt;
      &lt;label class="checkbox"&gt;
          &lt;input type="checkbox" id="grade-9" name="grade[]" value="9"&gt;Grade 9
      &lt;/label&gt;
      &lt;label class="checkbox"&gt;
          &lt;input type="checkbox" id="grade-10" name="grade[]" value="10"&gt;Grade 10
      &lt;/label&gt;
      &lt;label class="checkbox"&gt;
          &lt;input type="checkbox" id="grade-11" name="grade[]" value="11"&gt;Grade 11
      &lt;/label&gt;
      &lt;label class="checkbox"&gt;
          &lt;input type="checkbox" id="grade-12" name="grade[]" value="12"&gt;Grade 12
      &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>