title: Using jQuery to Select Hidden Radio Buttons but onclick Isn't Working
body: <p>I am using jQuery to hide the actual radio buttons on my website and replace them with images (custom radio buttons). The jQuery allows the user to click the image which in turn "selects" the hidden radio button. The actual radio buttons have onclick events attached to them in the html code, but when I "select" a radio button via the image (jQuery), the actual radio button doesn't appear to detect the selection and thus the onclick event is NOT activated.</p>
  
  <p>I can confirm that the onclick event script works when using the default radio buttons (no jQuery); it just doesn't work when I use jQuery for custom radio buttons. Here is my code so far:</p>
  
  <p><strong>HTML Code</strong></p>
  
  <pre><code>&lt;div class="prettyRadiobuttons clearfix"&gt;
  &lt;ul id="store"&gt;
  
  &lt;li&gt;&lt;input name="store" type="radio" id="store_1" value="store_1" onclick="dynamic_Select('code.php', this.value)" /&gt;
  &lt;label for="store_1"&gt;Store 1&lt;/label&gt;&lt;/li&gt;
  
  &lt;li&gt;&lt;input name="store" type="radio" id="store_2" value="store_2" onclick="dynamic_Select('code.php', this.value)" /&gt;
  &lt;label for="store_2"&gt;Store 2&lt;/label&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery (for custom radio buttons)</strong></p>
  
  <pre><code>$(document).ready(function() {
          //Adds the "radiolist" class to the div containing the radio buttons
          $("div.prettyRadiobuttons").addClass("radiolist");
  
          //Adds the html for the custom radio button (image) to each radio button (li)
          $("div.radiolist li").append('&lt;a class="radio-select" href="#"&gt;Select&lt;/a&gt;&lt;a class="radio-deselect" href="#"&gt;Cancel&lt;/a&gt;');
  
          //Handles selecting a radio button
          $(".radiolist .radio-select").click(
              function(event) {
                  event.preventDefault();
                  var $boxes = $(this).parent().parent().children();
                  $boxes.removeClass("selected");
                  $(this).parent().addClass("selected");
                  $(this).parent().find(":radio").attr("checked","checked");
              }
          );
  
          //Handles de-selecting a radio button
          $(".radiolist .radio-deselect").click(
              function(event) {
                  event.preventDefault();
                  $(this).parent().removeClass("selected");
                  $(this).parent().find(":radio").removeAttr("checked");
              }
          );
      });
  </code></pre>
  
  <p>The different classes in the jQuery are used to assign different images via CSS based on whether or not the radio button is selected.</p>
  
  <p>The jQuery code works without the onclick events being present, and the onclick events work without using jQuery, but I can't get them both to work together. Any help would be much appreciated!</p>