zoukankan      html  css  js  c++  java
  • 图片代替radio

    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>用JS实现的radio图片选择按钮效果-脚本之家</title> 
    <style> 
    .lanrentuku img{border:1px solid #008800;} 
    </style> 
    </head> 
    
    <body> 
    <script> 
    function myFun(sId) { 
        var oImg = document.getElementsByTagName('img'); 
    
        for (var i = 0; i < oImg.length; i++) { 
        if (oImg[i].id == sId) { 
                   oImg[i].previousSibling.previousSibling.checked = true; 
                oImg[i].style.border = '2px solid #ff8800'; 
            } else { 
                oImg[i].style.border = '0px'; 
    
            } 
        } 
    } 
    </script> 
    <div class="lanrentuku"> 
    <input type="radio" value= "lanrentuku" id= "111" name="aaa" style="display:none"> <img id="aa" src="http://files.jb51.net/upload/2010-1/20100119030617615.gif " onclick="myFun(this.id)"> 
    <input type="radio" value= "lanrentuku" id= "222" name="aaa" style="display:none"> <img id="bb" src="http://files.jb51.net/upload/2010-1/20100119030617308.gif" onclick="myFun(this.id)"> 
    <input type="radio" value= "lanrentuku" id= "333" name="aaa" style="display:none"> <img id="cc" src="http://files.jb51.net/upload/2010-1/20100119030617561.gif" onclick="myFun(this.id)"> 
    </div> 
    
    </body> 
    </html>
  • 相关阅读:
    CompareUtil
    linux awk学习笔记
    linux用grep查找包含两个关键字的命令
    mysql 使用set names 解决乱码问题
    对私有静态方法进行单测
    使用JUnit测试预期异常
    Tortoise svn 冲突解决主要办法
    tortoise svn冲突解决
    word-break与word-wrap
    移动端适配
  • 原文地址:https://www.cnblogs.com/xiaoliu66007/p/4997228.html
Copyright © 2011-2022 走看看