使用 LI select 无线电输入？

Question

我正在为特定的 select 项目使用支付按钮生成器，该生成器会创建一个预制单选价格列表。当您 select 您想要的 amount/item 时，您然后单击 "continue" 并触发模态支付框（然后转到 PayPal）。所有这些都很好用。问题是预制选项不允许您添加描述或段落或任何其他 html。因此，我使用基本 html 和内容在上面添加了一个项目列表，现在我正在尝试触发相应的无线电 select 或点击。

我的无序列表包含在一个基本的 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>

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

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

（等等）。有什么办法可以强制表格 select 与上面列表中的项目对应的级别？我可以用触发特定 item/level 复选框的 link 标签包装我的 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);
});

使用 LI select 无线电输入？

Use LI to select radio input?

html

css

forms

radio-button