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]
阅读 3.4k
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");
    }
})
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题