JQuery - Use dynamic images as radio buttons and more

Question

I have little to none knowledge in JS and have to accomplish the following:

• We use a third part module which enable images in options with magento. I can't modify the html structure of the following, only via jquery.
• We want to hide the RADIO BUTTON and use the thumbnail as the button
• When selected, the image will acquire a different style (don't know wich exactly, maybe a border)
• Also, the name of the input, that is in a SPAN, should appear somewhere - above the images.
• The styling, putting the images side by side, is piece of cake with CSS. The problem is with Jquery. Also, the tooltip is ok.

How we want to look:http://www.inusual.com.br/chaise-anelideos.html How it is today: http://www.inusual.com.br/namoradeira-francesca.html They behave differently because they are different modules.

Well, the HTML code is basically this:

<ul class="options-list">
  <li>
    <a class="img-radio">
      <img class="small-image-preview" src="#"/>
    </a>
    <input class="radio required-dependent" type="radio" value="somevalue" onclick="dependentOptions.select(this);opConfig.reloadPrice();">
    <span class="label">
      <label for="xxx">Option Name</label>
    </span>                                 
  </li>
  <li>
    <a class="img-radio">
      <img class="small-image-preview" src="#"/>
    </a>
    <input class="radio required-dependent" type="radio" value="somevalue" onclick="dependentOptions.select(this);opConfig.reloadPrice();">
      <span class="label">
    <label for="xxx">Option Name</label>
    </span>                                 
  </li>
</ul>

And the jQuery part I was trying is something like this:

jQuery(window).load(function()
{
  jQuery('li a.img-radio').click( function(){
  jQuery('li a.img-radio.selected').removeClass('selected');
  jQuery(this).addClass('selected');
  jQuery(this).find('input:radio').attr('checked','checked');
});
})

Any hints on how to make this work? Thanks very much!

Answer 1

You can't do jQuery(this).find('input:radio') but you can replace it with :

jQuery(this).find('input[type=radio]')

If you want to set the radio to checked, attr('checked' , 'checked') might work but I prefer this:

jQuery(this).find('input[type=radio]').checked = true;