javascript - label标签勾选问题

问题描述

问 题

我有两种支付方式，然后效果是只能默认勾一种，但是默认两种都勾上了，有什么办法可以只勾选一种吗？

html代码：

<ul id="collapseFivea" class="my-check-box">
                    <!-- {foreach from=$payment_list item=payment} -->
                    <li class="dis-box ts-1-1 y-checkout-box" id="li_{$payment.pay_id}"><img src="__TPL__/{$payment.pay_icon}">{$payment.pay_name}
                        <div class="box-flex">
                            <label class="ts-1-3 active"  for="payment_{$payment.pay_id}">
                            </label>
                        </div>
                        <input name="payment" type="radio" id="payment_{$payment.pay_id}" onclick="selectPayment(this)" value="{$payment.pay_id}" isCod="{$payment.is_cod}" {if $cod_disabled and $payment.is_cod eq "1"}disabled="true" {/if}>
                    </li>
                    <!-- {/foreach} -->
                </ul>
                
                
                js代码：
                   $(function() {
                    $('.ts-1-1').click(function() {
            for (var i = 0; i < $('.ts-1-1').size(); i++) {
                if (this == $('.ts-1-1').get(i)) {
                    $('.ts-1-3').eq(i).addClass('active');
                } else {
                    $('.ts-1-3').eq(i).removeClass('active');
                }
            }
        })
})


目前效果：
![图片描述][1]
想要效果：
![图片描述][2]

解决方案

你这是模版数据循环吧

<label class="ts-1-3 active"  for="payment_{$payment.pay_id}"></label>

这样写的话岂不是每一个循环对象都带有active类,建议active

---

因为没有全部代码不能看到实际的效果图，只能按代码逻辑来写了

$("#collapseFivea").children("li").eq(0).find(".ts-1-3").addClass("active");
$('.ts-1-1').click(function() {
    if(!$(this).find(".ts-1-3").hasClass('active')){
        $(".ts-1-3").removeClass("active");
        $(this).find(".ts-1-3").addClass("active");
    }
})

这篇关于javascript - label标签勾选问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！