是否使用li选择单选输入按钮？

Question

我正在创建一个付款选项按钮。问题是预制的选项没有地方添加支付图像和描述。因此，我已经使用基本的html和内容创建了一个( li )选项列表，现在我想知道是否可以让li在按下时选择输入

​

​

HTML代码

<div class="shipping-method">
<ul class="">
    <li>
        <div class="item"><a href="javascript:;" class="weixin_wap">Wechat</a>
            <div class="disc"></div>
        </div>
    </li>
    <li>
        <div class="item on"><a href="javascript:;" class="alipaywap">AliPay</a>
            <div class="disc">Discription goes here</div>
        </div>
    </li>
</ul></div>

当前输入代码

<div class="radio-buttons-selection">
<label>
    <input name="shipping" type="radio" class="radio" id="shipping_{$shipping.shipping_id}" value="{$shipping.shipping_id}" {if $order.shipping_id eq $shipping.shipping_id}checked="true" {/if} supportCod="{$shipping.support_cod}" insure="{$shipping.insure}" onclick="selectShipping(this)">
    <div class="shipping_{$shipping.shipping_id} box"> <span>{$shipping.shipping_name}</span> </div>
</label>

​

Answer 1

不幸的是，我不太确定您是如何使用其余代码实现当前输入代码的。但是，使用第一段代码时，应该可以使用下面这样的代码(使用jQuery)：

​

$("li").on("click", function() {
$("input[type=radio]").each(function() {
    		$(this).prop("checked", false);
        });
		
        $(this).find("input[type=radio]").prop("checked", true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shipping-method">
<ul class="">
    <li>
        <div class="item"><a href="#" class="weixin_wap">Wechat</a>
            <div class="disc"></div>
            <input type="radio"/>
        </div>
    </li>
    <li>
        <div class="item on"><a href="#" class="alipaywap">AliPay</a>
            <div class="disc">Discription goes here</div>
            <input type="radio"/>
        </div>
    </li>
</ul></div>

​

基本上，如果一个列表项被点击，找到该列表项中的inputtype=radio并检查它(在此之前，确保所有其他项都未被选中，这样我们就可以保持它“有效”)。

如果您可以将HTML代码与当前的输入代码合并，我也许可以提供一个更好的示例，但是尽管如此，您可能会看到发生了什么以及您可以做些什么？

Answer 2

$(".shipping-method li").on("click", function() {
$(".shipping-method input[type=radio]").each(function() {
                $(this).prop("checked", false);
                $(this).children(".shipping-method .item").removeClass("on");
        });

        $(this).find("input[type=radio]").prop("checked", true);
        $(this).find(".item").addClass("on");
});

Answer 3

值:我假设'selectShipping‘方法将尝试从’‘中提取上面的值(id、value、insure、supportCod

在浏览器上“右键单击”&在运行时查找您无法自定义的输入元素'*‘的相应值：

1.)$shipping.shipping_id=?？，value=??，supportCod=??，insure=？第一选项2)$shipping.shipping_id=？？，value=??，supportCod=??，insure=?？第二个选项的

将元素到包含selectShipping方法所需的元素中-->

<div class="shipping-method">
    <ul class="">
        <li>
            <div class="item"><a href="javascript:;" class="weixin_wap" id="shipping_{$shipping.shipping_id_Of_firstoption}" value="{??Of_firstoption}" insure="{$shipping.insureOf_firstoption}" onclick="selectShipping(this)>Wechat</a>
                <div class="disc"></div>
            </div>
        </li>
        <li>
            <div class="item on"><a href="javascript:;" class="alipaywap" id="shipping_{$shipping.shipping_id_Of_second_option}" value="{??Of_second_option}" insure="{$shipping.insureOf_second_option}" onclick="selectShipping(this)>AliPay</a>
                <div class="disc">Discription goes here</div>
            </div>
        </li>
    </ul></div>