Use LI to select radio input?

Question

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!

Answer 1

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);
});