title: How to hide the parent of an unchecked checkbox?
body: <p>I have a set of random/dynamic generated div checkboxes:</p>
  
  <pre><code>&lt;div&gt;A1 &lt;input type='checkbox' name='A[]' value='A1'&gt; &lt;/div&gt;
  &lt;div&gt;A2 &lt;input type='checkbox' name='A[]' value='A2'&gt; &lt;/div&gt;
  &lt;div&gt;A3 &lt;input type='checkbox' name='A[]' value='A3'&gt; &lt;/div&gt;
  &lt;div&gt;B1 &lt;input type='checkbox' name='B[]' value='B1'&gt; &lt;/div&gt;
  &lt;div&gt;B2 &lt;input type='checkbox' name='B[]' value='B2'&gt; &lt;/div&gt;
  &lt;div&gt;C1 &lt;input type='checkbox' name='C[]' value='C1'&gt; &lt;/div&gt;
  </code></pre>
  
  <p>What I am trying to do is when the user:</p>
  
  <ol>
  <li>checks any A then the others will hide (entire div) but all A will still show.</li>
  <li>unchecks a checkbox, then all A, B, C will show again.</li>
  </ol>
  
  <p>This is because I am preventing the user from checking a mix of options.</p>
  
  <p>PS:
  You can provide a solution that might need me to modify the generated output of checkboxes.</p>