radio改版样式

最新推荐文章于 2024-07-29 14:03:25 发布

wangqiuchen_Study

最新推荐文章于 2024-07-29 14:03:25 发布

阅读量474

点赞数

分类专栏： html CSS

本文链接：https://blog.csdn.net/wangqiuchen_Study/article/details/51003247

版权

CSS 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

html

10 篇文章 0 订阅

订阅专栏

.sex_male ,.sex_female{ opacity: 0; cursor: pointer; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0);}label{    display:-moz-inline-block;    display:inline-block;    margin:5px 0; padding-left:20px; line-height:18px; background: url("../images/radio-no.png") no-repeat;width: 18px;height: 18px;}label.checked{background: url("../images/radio-hover.png") no-repeat;width: 18px;height: 18px;}

$(function(){
    //单选事件
     labels = document.getElementById('male').getElementsByTagName('label');
     radios = document.getElementById('male').getElementsByTagName('input');
     for(i=0,j=labels.length ; i<j ; i++)
     {
         labels[i].onclick=function()
         {
             if(this.className == '') {
                 for(k=0,l=labels.length ; k<l ; k++)
                 {
                     labels[k].className='';
                     radios[k].checked = false;
                 }
                 this.className='checked';
                 try{
                     document.getElementById(this.name).checked = true;
                 } catch (e) {}
             }
         }
     }
});

<td id="male">
<input type="radio" class="sex_male" checked="checked" name="sex" value="" /><label name="sex_male" class="checked" for="sex_male">男</label>
<input type="radio" class="sex_female" name="sex" value="" /><label name="sex_female" for="sex_female">女</label>
</td>