jquery Radio button image replacement, select with jquery?

[game_over]

I have a form where user can select different currencies, i want to hide the radio buttons and replace them with images, when the image is clicked it will select the correct radio button.

<form method="POST" action="">
<label for="GBP">
  <input type="radio" name="currency" value="GBP" class="toggle">
  <div class="flag-GBP"><img src="/images/flags/GBP.jpg"></div>
</label>
<label for="USD">
  <input type="radio" name="currency" value="USD" class="toggle">
  <div class="flag-USD"><img src="/images/flags/USD.jpg"></div>
</label>
<label for="EUR">
  <input type="radio" name="currency" value="EUR" class="toggle">
  <div class="flag-EUR"><img src="/images/flags/EUR.jpg"></div>
</label>
<label for="JPY">
  <input type="radio" name="currency" value="JPY" class="toggle">
  <div class="flag-JPY"><img src="/images/flags/JPY.jpg"></div>
</label>
<label for="AUD">
  <input type="radio" name="currency" value="AUD" class="toggle">
  <div class="flag-AUD"><img src="/images/flags/AUD.jpg"></div>
</label>
<label for="CAD">
  <input type="radio" name="currency" value="CAD" class="toggle">
  <div class="flag-CAD"><img src="/images/flags/CAD.jpg"></div>
</label>
<input type="submit" value="Submit" name="submit_currency">
</form>
[/CODE]

So when the div or image is clicked, i want it's radio button to be checked, once i know it's doing this i can hide the radio button and just have clickable flag images but nothing seems to work.. any suggestions?

[Dick Montage]

Is there no jQuery plugin for this?

[game_over]

Is there no jQuery plugin for this?

a full plugin for what technically should be a couple of lines of code?

just managed to work it out

$('img').click(function() {
  $(this).parent().find(":radio").attr('checked', true);
});
[/CODE]

[game_over]

I've run into another problem,

I want the form to submit automatically after an image is clicked so i've added

$('#settings img').click(function() {
  $(this).parent().find(":radio").attr('checked', true);
  $("#settings").submit();
});
[/CODE]

However, when i submit it this way it does not register the checked value, if i submit it using the submit button it does.

[lnmnky]

I thought "checked" was changed to a prop in jQuery instead of an attr. Not going to check... just a thought.

Also. WTF is #settings, it's not listed.

[Dick Montage]

a full plugin for what technically should be a couple of lines of code?

I no of course, but I missread, my bad. I thought you needed a replacement for checkboxes, which I've used an awesome plugin before.

[game_over]

I no of course, but I missread, my bad. I thought you needed a replacement for checkboxes, which I've used an awesome plugin before.

Well thats pretty much right, it's just image replacements for radio buttons.

[threetonesun]

$('#settings :checked') should get you the value you want.

http://api.jquery.com/checked-selector/

[lnmnky]

When you force the attribute to checked, do you have to unforce the previously checked one?

Not going to check myself for free..... :p

[game_over]

When you force the attribute to checked, do you have to unforce the previously checked one?

Not going to check myself for free..... :p

lol it's not forcing it, when another is selected the previous deselects on it's own as they are part of the same group.

I've fixed that issue, it is now the issue with $(selector).submit(); .. when i submit the form this way it doesn't register a selection on the radio buttons, probably because jquery is asynchronous therefore it's submitting the form before it's captured the value.