Loading

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

如何利用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、效果预览

posted @ 2022-05-25 12:23  Roc-xb  阅读(30)  评论(0编辑  收藏  举报

易微帮源码


易微帮官网