Q:

Use LI to select radio input?

I am using a payment button generator for a specific selection of items that creates a pre-made radio list of prices.  When you select the amount/item you want, you then click "continue" and it triggers the modal payment box (which then goes to PayPal).  All of that is working great.  The problem is the pre-made option gives you NO place to add descriptions or paragraphs or any other html.  So I have added a list of items above using basic html and content and am now trying to trigger the corrosponding radio selector on-click.
My unordered list of items are wrapped in a basic div and each item has a custom ID.
<div id="items-container">
  <ul>
    <li id="item1"><div>my content</div></li>
    <li id="item2"><div>my content</div></li>
  </ul>
</div>

Directly below this block of code is the pre-generated form from the payment module I am using.  It generates a checkbox selection for prices like this:
<form method="post" action="#">
  <ul id="prices-wrap-radio-list">
    <li>
    <input type="radio" value="10.00" id="level-1" name="price-level" data-price-id="1">
    <label for="level-1">Level 1</label>
  </li>
  <li>
    <input type="radio" value="20.00" id="level-2" name="price-level" data-price-id="2">
    <label for="level-2">Level 2</label>
  </li>
  </ul>
</form> 

(and so on).
Is there any way to force the form to select the corrosponding level with the items in the list above? Can I wrap my LI tag with a link tag that triggers the checkbox for that specific item/level?  Or would I need some jQuery for that?
Thanks!

A:

If JQuery is allowed:
$('li').click(function() {
$(':radio[data-price-id="'+$(this).data('level')+'"]').prop('checked', true);
});

Just give list items appropriate attributes:
<li id="item1" data-level="1"><div>my content</div></li>
<li id="item2" data-level="2"><div>my content</div></li>

EDIT: 
If you can't change HTML structure, try with this:
$('li').click(function() {
    index=$(this).index();
$(':radio').eq(index).prop('checked', true);
});

