文章详情

如何利用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实现ul列表中点击li选择radio

您可能感兴趣的文章:

  • jquery.qrcode.js生成二维码并转成图片格式
  • 如何在vue 中引入使用jquery
  • jquery实现加载更多"转圈圈"效果(示例代码)
  • jQuery实现移动端扭蛋机抽奖
  • jQuery zTree如何改变指定节点文本样式

版权:版权申明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 70068002@qq.com 举报,一经查实,本站将立刻删除。

转载请注明出处:https://www.stntk.com/2556.html

相关推荐
JS前端模拟Excel条件格式实现数据条效果
需求背景 最近业务中遇到一个有意思的需求,是要在现有的表格中实现类似 Excel 中的数据条的效果,在数据比较多的时候单纯看表格里的数字会比…
头像
前端开发 2024-05-26
934
js 实现汉字简体和繁体之间的互相转换
简体字 简体字(Simplified Chinese,简体中文),是中国大陆地区目前在用的字体,由官方公布的简体字,主要由传承字以及1950…
头像
前端开发 2024-05-26
713
如何使用nginx配置代理多个前端资源?
背景 两套不同的前端使用同一个后端服务,前端使用的Nginx代理的dist包 前端 vue+elementui 后端 Python+flas…
头像
前端开发 2024-05-26
582
jquery实现ul列表中点击li选择radio
如何利用jquery实现ul列表中点击li选择radio呢? 1、HTML代码 <ul class="list-group"> …
头像
前端开发 2024-05-26
1,134
vue3.2+ts实现在方法中可调用的拟态框弹窗(类el-MessageBox)
公司UI设计的拟态框弹窗跟Element Plus UI的布局不太一致。导致不能够直接修改样式得到想到样式。直接上图。 这个需求最主要的是要…
头像
前端开发 2024-05-26
1,139
前端如何实现网页变灰功能?
今天来从前端的角度看看网页置灰是如何实现的,以及相关使用技巧! 实现思路 先来看看一些主流网站是如何实现置灰的: BiliBili: 京东 …
头像
前端开发 2024-05-26
861
发表评论
暂无评论

还没有评论呢,快来抢沙发~

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

70068002@qq.com

扫描二维码

关注微信公众号