注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

牧野流星

每个人心中都有一个梦想..........

 
 
 

日志

 
 

修改input单选按钮样式  

2013-11-06 09:41:37|  分类: JS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
有的时候我们需要把单选按钮换成自己的样式,以下代码可用。

修改input单选按钮样式 - 过客 - 牧野流星
修改后
修改input单选按钮样式 - 过客 - 牧野流星
  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>按钮测试</title>  
<style type="text/css">  
 body  
 {  
  font-size:12px;  
  font-family:'宋体';  
 }  
 #sex_male ,  
 #sex_female ,  
 #sex_nomale  
 {  
  display:none  
 }  
 label  
 {  
  display:-moz-inline-block;  
  display:inline-block;  
  cursor:pointer;  
  margin:5px 0;  
  padding-left:20px;  
  line-height:15px;  
  background:url(1.gif) no-repeat left top;  
 }  
 label.checked  
 {  
  background-position:left bottom;
  background:#c00;
 }  
</style>  
<script type="text/javascript">  
 window.onload = function()   
 {  
  labels = document.getElementById('rd').getElementsByTagName('label');  
  radios = document.getElementById('rd').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) {}  
    }  
   }  
  }  
 }  
 var male_obj = {'male':'A', 'female':'B','nomale':'C'};  
 function checkform(obj) {  
    for (i = 0; i < obj.sex.length; i++) {  
        if (obj.sex[i].checked) {  
            alert(male_obj[obj.sex[i].value]);  
            break;  
        }  
    }  
    return false;  
 }  
</script>  
</head>  
<body>  
<form name="reg" onsubmit="return checkform(this);">  
 <table border="0">  
  <tr>  
    <td width="200" id="rd">  
        <input type="radio" id="sex_male" checked="checked" name="sex" value="male" /><label name="sex_male" class="checked" for="sex_male">A</label>  
        <input type="radio" id="sex_female" name="sex" value="female" /><label name="sex_female" for="sex_female">B</label>  
      <input type="radio" id="sex_nomale" name="sex" value="nomale" /><label name="sex_nomale" for="sex_nomale">C</label></td>  
  </tr>  
  <tr>  
    <td>  
      <input type="submit" name="Submit" value="测试选项" id="Submit" /></td>  
  </tr>  
 </table>  
</form>  
</body>  
</html>  
  评论这张
 
阅读(3460)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018