使用LI选择无线电输入? [英] Use LI to select radio input?

问题描述

我正在使用付款按钮生成器来选择特定的商品，这些商品会创建一个预制的单价清单.当您选择所需的金额/项目时，然后单击继续"，它将触发模式付款框(然后转到PayPal).所有这一切都很好.问题是，预制选项不提供添加描述或段落或任何其他html的位置.因此，我在上面使用基本的html和内容添加了一个项目列表，现在正试图触发点击时出现的相应的单选按钮.

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.

我无序的项目列表都包裹在一个基本的div中，并且每个项目都有一个自定义ID.

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> 

(依此类推). 有什么方法可以强制表格选择与上面列表中的项目相对应的级别?我可以使用链接标签来包装我的LI标签吗?该链接标签会触发该特定项目/级别的复选框?还是我需要一些jQuery?

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

谢谢！

推荐答案

如果允许使用JQuery:

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>

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

If you can't change HTML structure, try with this:

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

这篇关于使用LI选择无线电输入?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！