使用 li 选择单选输入按钮？答案

【问题标题】：Use li to select radio input buttons?使用 li 选择单选输入按钮？
【发布时间】：2018-12-28 08:49:12
【问题描述】：

我正在创建一个付款选项按钮。问题是预制选项无法添加付款图像和描述。所以我已经使用基本的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>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

[:我假设 'selectShipping' 方法会尝试从上面提取来自“this”的值（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>

【讨论】：

【解决方案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");
});

【讨论】：

当 li 被选中时会添加一个类，它是“on”，所以当 li 被选中时，它也应该添加类

【解决方案3】：

很遗憾，我不太确定您是如何使用其余代码实现的当前输入代码。但是，使用第一个 sn-p 代码，这样的东西（使用 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 代码与您的当前输入代码合并，我也许可以提供一个更好的示例，但您可能会看到发生了什么以及您可以做什么？

【讨论】：