文章详情
如何利用jquery实现ul列表中点击li选择radio呢?
1、HTML代码
<ul class="list-group">
<li class="list-group-item">
<input name="money" value="1" type="radio"> <span>1元=1金币</span>
</li>
<li class="list-group-item">
<input name="money" value="5" type="radio"> <span>5元=5金币</span>
</li>
<li class="list-group-item active">
<input name="money" value="10" type="radio" checked="checked"> <span>10元=10金币</span>
</li>
<li class="list-group-item">
<input name="money" value="20" type="radio"> <span>20元=20金币</span>
</li>
<li class="list-group-item">
<input name="money" value="50" type="radio"> <span>50元=50金币</span>
</li>
<li class="list-group-item">
<input name="money" value="100" type="radio"> <span>100元=100金币</span>
</li>
</ul>
2、JS代码
<script type="text/javascript">
$(function (){
$(".list-group li").click(function(){
// 改变选择class
$(this).siblings("li").removeClass("active");
$(this).addClass("active");
// 选中状态
$(this).find("input").get(0).checked = true
})
})
</script>
3、效果预览
您可能感兴趣的文章:
- jquery.qrcode.js生成二维码并转成图片格式
- 如何在vue 中引入使用jquery
- jquery实现加载更多"转圈圈"效果(示例代码)
- jQuery实现移动端扭蛋机抽奖
- jQuery zTree如何改变指定节点文本样式
版权:版权申明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 70068002@qq.com 举报,一经查实,本站将立刻删除。
转载请注明出处:https://www.stntk.com/2556.html
还没有评论呢,快来抢沙发~