jquery实现ul列表中点击li选择radio

柔光的暖阳◎ 2023-09-29 15:59 26阅读 0赞

> 如何利用jquery实现ul列表中点击li选择radio呢？

**目录**

1、HTML代码

2、JS代码

3、效果预览

--------------------

## 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、效果预览 ##

![5adf8f157fce42b48c5512f4f42317ee.gif][]

[5adf8f157fce42b48c5512f4f42317ee.gif]: https://img-blog.csdnimg.cn/5adf8f157fce42b48c5512f4f42317ee.gif

发表评论取消回复

表情：

评论列表（有 0 条评论，26人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3中ul,li{}； ul li{}； ul＞li{}有何区别

![a09384c31d2f3403435ddb8d7e617445.jpeg][] 转自：[微点阅读][Link 1] [https://www.weidianyuedu.

分手后的思念是犯贱/ 2024年03月29日 16:32/ 0 赞/ 111 阅读

相关使用jQuery为无序列表（ul）中的列表项（li）添加背景颜色

要在使用jQuery编写的网页中为无序列表中的列表项添加背景颜色，您可以按照以下步骤进行操作：步骤 1：引入jQuery库首先，在您的HTML文件中引入jQuery库

怼烎@/ 2024年03月01日 03:36/ 0 赞/ 55 阅读

相关 jquery实现ul列表中点击li选择radio

> 如何利用jquery实现ul列表中点击li选择radio呢？目录 1、HTML代码 2、JS代码 3、效果预览 --------------------

柔光的暖阳◎/ 2023年09月29日 15:59/ 0 赞/ 27 阅读

相关 ul li列表排序

在一个列表中，每一项都有多个数据，像这样 <ul class="datalist"> <li class="item"> <span c

以你之姓@/ 2022年10月16日 09:59/ 0 赞/ 258 阅读

相关 jquery ul html,jquery实例之div ul li模拟下拉选项(option标签)

例子，自己定义一种样式来模拟option标签功能。复制代码代码示例: $( function()\{ $("\lang").click(function()\{

小咪咪/ 2022年10月07日 12:47/ 0 赞/ 188 阅读

相关 jquery radio 选择器

radio选择器页面上有两个单选框 <input type="radio" id="liveType" value="0" name="actiType" che

小灰灰/ 2022年09月25日 01:13/ 0 赞/ 98 阅读

相关遍历 ul li

<pre name="code" class="javascript">//遍历当前用户 function foreachAuthor(data

快来打我*/ 2022年09月21日 13:24/ 0 赞/ 154 阅读

相关 html中ul li前面小黑点样式 ul li一些样式

对于很多人用div来做网站时，总会用到，但在显示效果时前面总是会有一个小黑点，这个令很多人头痛，但又找不到要源，其它我们可以用以下方法来清除。 1、在CSS中写

爱被打了一巴掌/ 2022年07月19日 05:11/ 0 赞/ 336 阅读

相关 ul列表解决最后一个li标签的margin问题

原文地址：[http://www.qdfuns.com/notes/18692/4aaf900b84dcb4ab111ddfd93b87c8ee.html][http_www.

雨点打透心脏的1/2处/ 2022年06月10日 08:59/ 0 赞/ 219 阅读

相关 jquery 如何获取ul中li的值

> html页面代码如下 > > <span></span>显示选中的li的值 <span id="tresult"></span> <ul style

旧城等待，/ 2022年02月24日 12:34/ 0 赞/ 1176 阅读