title: jQuery to check and uncheck checkboxes only fires once
body: <p>I have a very simple requirement for my jQuery: to check a set of boxes if a radio button is checked, and to clear them all if another is checked.</p>
  
  <p>The jquery works, however it only works once - that is if I click to check them all (all boxes check) and then click to clear them (all boxes clear), and then again click to check them all - there is no effect. Similarly if I manually uncheck some boxes then click to select all again, there is no effect.</p>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$('#all').on('change', function() {
      if (!$(this).is(':checked')) {
          $('.country').attr('checked', false);   
      } else {
          $('.country').attr('checked', true);
      }
  });
  
  
  $('#none').on('change', function() {
      if (!$(this).is(':checked')) {
          $('.country').attr('checked', true);    
      } else {
          $('.country').attr('checked', false);
      }
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code> &lt;div class="subselect"&gt;
      &lt;input type="radio" class="TLO" name="radio1" id="all" /&gt;Check All
  &lt;br /&gt;
          &lt;input type="radio" class="TLO" name="radio1" id="none" /&gt;Clear All
          &lt;br /&gt;
      &lt;/div&gt;
  
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;div class="cselect" id="countries"&gt;
          &lt;input type="checkbox" class="country"  /&gt;1
          &lt;br /&gt;
          &lt;input type="checkbox" class="country"  /&gt;2
          &lt;br /&gt;
          &lt;input type="checkbox" class="country"  /&gt;3
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>jsFiddle</strong>
  <a href="http://jsfiddle.net/vsGtF/1/" rel="noreferrer">http://jsfiddle.net/vsGtF/1/</a></p>