Highlighting a radio button wrapper div (or element)

Highlighting a radio button wrapper div (or element)

Hi,

I'm fairly new in my adventures with jQuery and I'm a bit stuck on this. I have a set of radio buttons that are wrapped in divs and I want to highlight the wrapping div (by adding a class) of a radio button that is clicked while removing the highlight from any previously selected radio button (by removing the class).

I've got it working to the point where it only works on one set of radio buttons but I need to be able to do this on multiple sets. I did find this but was not able to figure out how I'd apply this to my requirement as it is working the other way around here:

jquery-tip-how-to-select-radiocheckbox-input-on-click

Any ideas why its working only on the last set? Also if you have any tips about my code in general then please feel free to comment.

  1. $(document).ready(function(){
  2.     function radioHighlight(radioName, className) {
  3.         radioNameSelector = "input[name='" + radioName + "']";
  4.         $(radioNameSelector).click(function() {
  5.             $(radioNameSelector).parent().removeClass(className);
  6.             $(radioNameSelector + ':checked').parent().addClass(className);
  7.         });
  8.     }    

  10.     radioHighlight('beneficiary', 'box_selected');
  11.     radioHighlight('trans_type', 'box_selected');
  12. });
My HTML:

  1. <div class="box-s1"><input type="radio" name="payment_method" class="checkbox" value="card"/> By Credit/Debit Card</div>
  2. <div class="box-s1"><input type="radio" name="payment_method" class="checkbox" value="paypal"/> By PayPal</div>
  3. <div class="box-s1"><input type="radio" name="payment_method" class="checkbox" value="account_transfer"/> By Bank Transfer</div>
  4. <div class="box-s1"><input type="radio" name="payment_method" class="checkbox" value="cheque"/> By Cheque</div>
Thanks,
Ziad