jQuery模仿单选按钮选中效果

前端之家收集整理的这篇文章主要介绍了jQuery模仿单选按钮选中效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

刚开始学jquery,工作中有些css表单中的按钮美化很麻烦,所以想着用jquery来替换,复选框的jquery很容易,就是简单的样式切换效果,用toggleClass()方法即可。

而单选框之前一直不知道怎么做,因为在单选框中选中一个,其他的都必须移除掉样式,如果2个单选框在同级中则用siblings()则可直接找到其他单选框移除掉样式即可。鉴于自己工作是循环列表模式,每个

  • 里面都带有一个单选框,未发现jquery中parent()这个好用的方法,以致于纠结了半天。

    css如下:

    <Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> 设置-收货地址 // $(function(){ //改变样式同时改变右边的文字 $("span.zdy-icon-radio").click(function(){ $(this).addClass("active").text("默认地址") .parent().parent().parent().siblings().find("span.zdy-icon-radio").removeClass("active").text("设为默认"); }); }) //]]>
    15354656536 苏定芳
    dio active">默认地址
    编辑 删除
    15354656536 苏定芳
    dio">设为默认
    编辑 删除
    15354656536 苏定芳
    dio">设为默认
    编辑 删除

    效果如下:无论如何都只能一个添加样式,右边文字也随点击改变。

    以上所述是小编给大家介绍的jQuery模仿单选按钮选中效果。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

    原文链接:https://www.f2er.com/jquery/47602.html
  • 猜你在找的jQuery相关文章