实现效果,选中input后切换对应的文字,可是现在效果出不来,求指教:
<div class="fl">
<div class="am-btn-group">
<label class="am-btn am-btn-default am-btn-xs">
<input type="radio" name="options" id="option1" checked="checked">出口退税融资服务
</label>
<label class="am-btn am-btn-default am-btn-xs">
<input type="radio" name="options" id="option2" checked="">市场采购服务
</label>
<label class="am-btn am-btn-default am-btn-xs">
<input type="radio" name="options" id="option3" checked="">旅游报关服务
</label>
</div>
</div>
<div class="clear"></div>
<div class="select2">
<span class="am-collapse beizhu am-in" id="fuwuop1">您当前选择的服务类型:出口退税融资服务</span>
<span class="am-collapse beizhu" id="fuwuop2">您当前选择的服务类型:市场采购服务</span>
<span class="am-collapse beizhu" id="fuwuop3">您当前选择的服务类型:旅游报关服务</span>
</div>
</li>
<button class="am-btn am-btn-primary" data-am-collapse="{target: '#step_say-2,#step_say-1'}">下一步</button>
</ul> <!-- 步骤内容 -->
</div>
</li>
<script src="assets/js/jquery.min.js"></script>
<script>
$(function(){
if($('#option1').is(':checked')){
$('#fuwuop1').addClass("am-in");
$('#fuwuop2').removeClass('am-in');
$('#fuwuop3').removeClass('am-in');
}
else if($('#option2').is(':checked')){
$('#fuwuop2').addClass("am-in");
$('#fuwuop1').removeClass('am-in');
$('#fuwuop3').removeClass('am-in');
}
else($('#option3').is(':checked')){
$('#fuwuop3').addClass("am-in");
$('#fuwuop1').removeClass('am-in');
$('#fuwuop2').removeClass('am-in');
}
});
</script>
因为你没用事件……
要记得把你的脚本部分放在input
的change
事件里。