欢迎来到福编程网,本站提供各种互联网专业知识!

jQuery模仿单选按钮选中效果

发布时间:2016-06-24 作者:小旭依然 来源:转载
单选按钮以及复选按钮的使用情况还是蛮多的,多选按钮使用toggleClass()方法就可以实现,下面小编给大家介绍单选按钮的实现,感兴趣的朋友一起看下吧

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

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

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

    css如下:

    
    
    
    
    
    设置-收货地址
    
    
    //
    $(function(){
    //改变样式同时改变右边的文字
    $("span.zdy-icon-radio").click(function(){
    $(this).addClass("active").text("默认地址")
    .parent().parent().parent().siblings().find("span.zdy-icon-radio").removeClass("active").text("设为默认");
    });
    })
    //]]>
    
    
    
    
    
    编辑地址
    15354656536 苏定芳
    南昌市北京东路1999号江西师范科技大学科技园讯升信息技术有限公司
    默认地址
    编辑 删除
    15354656536 苏定芳
    南昌市北京东路1999号江西师范科技大学科技园讯升信息技术有限公司
    设为默认
    编辑 删除
    15354656536 苏定芳
    南昌市北京东路1999号江西师范科技大学科技园讯升信息技术有限公司
    设为默认
    编辑 删除

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

    以上所述是小编给大家介绍的jQuery模仿单选按钮选中效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对全福编程网网站的支持!

  • 相关推荐