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

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

40b109b7763c3e9e6c3117dbadc9869c30dfd263

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容