title: jQuery - Reset radio buttons on click
body: <p><strong>jsfiddle</strong></p>
  
  <p><a href="http://jsfiddle.net/cCBUh/2/" rel="nofollow">http://jsfiddle.net/cCBUh/2/</a></p>
  
  <p><strong>Information</strong></p>
  
  <ul>
  <li>I have 3 choices. Only click on the labels, not on the radio buttons.</li>
  <li>When clicking on the different labels, different radio buttons are checked.</li>
  <li>In the console it says "clicked" when ever a label is clicked just to make sure that happens.</li>
  <li>When clicking on the same label twice, the console says "checked", telling us it's
  already checked.</li>
  <li>If the label is already checked it should remove the checked from all the radio buttons, resetting it, like it's from the start.</li>
  </ul>
  
  <p><strong>Problem</strong></p>
  
  <p>When clicking on the radio button the second time the click don't remove the checked from all the radio buttons. Why is that? Solution?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="panel"&gt;
      &lt;label for="radio-1"&gt;Radio 1&lt;/label&gt;
      &lt;label for="radio-2"&gt;Radio 2&lt;/label&gt;
      &lt;label for="radio-3"&gt;Radio 3&lt;/label&gt;
      &lt;input type="radio" id="radio-1" name="group-1"&gt;
      &lt;input type="radio" id="radio-2" name="group-1"&gt;
      &lt;input type="radio" id="radio-3" name="group-1"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>jQuery(document).ready(function($) {
      $('.panel label').on( "click", function(e) {
          console.log('clicked');
          var my_id = $(this).attr('for');
          if( $('.panel #' + my_id).is(':checked') ) {
              console.log('checked');
              $('.panel input[type="radio"]').prop('checked', false);
          }
      });
  });
  </code></pre>