Question

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

This is how current html looks

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>

基本上，如果单击了列表项，请在该列表项中找到input [type = 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'方法将尝试在上面提取 'this'中的值（id，value，insure，supportCod）]

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

1。）$ shipping.shipping_id = ?? ，value = ??，supportCod = ??，insure = ??首选 2。）$ shipping.shipping_id = ?? ，值= ??，supportCod = ??，确保= ??第二种选择

将

元素放入元素containsin中，如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>

使用li选择单选按钮？

3 个答案: