使用 LI 选择无线电输入？

Question

我正在使用一个支付按钮生成器来创建一个预先制作的单选价格列表。当您选择所需的金额/项目时，然后单击“继续”，它会触发模式支付框（然后转到 PayPal）。所有这一切都很好。问题是预制选项让您无法添加描述或段落或任何其他 html。因此，我使用基本的 html 和内容添加了上面的项目列表，现在我尝试在点击时触发相应的单选选择器。

我的项目无序列表被包装在一个基本的 div 中，每个项目都有一个自定义 ID。

<div id="items-container">
  <ul>
    <li id="item1"><div>my content</div></li>
    <li id="item2"><div>my content</div></li>
  </ul>
</div>

这段代码的正下方是我正在使用的支付模块的预生成表单。它会为这样的价格生成一个复选框选择：

<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> 

（等等）。 有没有办法强制表格选择与上面列表中的项目对应的级别？我可以用触发特定项目/级别复选框的链接标签包装我的 LI 标签吗？或者我需要一些 jQuery 吗？

谢谢！

Answer 1

如果允许使用 JQuery：

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

只需给列表项适当的属性：

<li id="item1" data-level="1"><div>my content</div></li>
<li id="item2" data-level="2"><div>my content</div></li>

编辑： 如果您无法更改 HTML 结构，请尝试以下操作：

$('li').click(function() {
    index=$(this).index();
$(':radio').eq(index).prop('checked', true);
});