自定义radio标签

来源：互联网发布：python 数组下标负数编辑：程序博客网时间：2024/05/29 16:01

jquery操作radio

/*获取选中的radio*/$("input[type='radio']:checked")/*获取没有被选中的radio*/$("input[type='radio']:not(:checked)")

给radio加上click事件

在给一个radio加上click事件的时候，如果在点击时想要判断是否让该选项选中，如果不想让radio被选中，那么需要在click的事件处理中返回false。

自定义radio标签

<span class='lang-radio'>        <input type="radio" id='lang-radio-1' name='pays'/>        <label for="lang-radio-1"></label>    </span>

背景图片

.lang-radio{    display: inline-block;    position: relative;    width: 15px;    height: 15px;    line-height: 15px;    overflow: hidden;}.lang-radio input{    position: absolute;    z-index: 0;    top: -20px;    left: -20px;}.lang-radio label{    display: inline-block;    width: 15px;    height: 15px;    background: url(img/radio-background.png) no-repeat 0 -34px;}.lang-radio-checked label{    background-position: 0 0;}.lang-radio-disabled label{    background-position: 0 -17px;}

var inputRadio=$('input[type="radio"]');    inputRadio.on('click.radio',function(e){        var parent=$(this).parent('.lang-radio');        if(parent.hasClass('lang-radio-disabled')){            return false;//不能被选中，那么就返回false        }else{            var name=$(this).attr("name");            var checkedParent=$('input[name='+name+']:checked').parent('.lang-radio');            var uncheckedParent=$('input[name='+name+']:not(:checked)').parent('.lang-radio');            uncheckedParent.removeClass('lang-radio-checked');            checkedParent.addClass('lang-radio-checked');        }    });

0 0