如何在单选框选中的情况下，使选项的图标点亮；而其他没有选中的呈灰色

如何在单选框选中的情况下，使选项的图标点亮；而其他没有选中的呈灰色。求JS代码.

解决方案 »

  1.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" src="http://www.wanmei.com/public/js/jq_132.js"></script>
    <style>
    span{width:100px; background:}
    </style>
    </head><body>
    <input type="checkbox" value="1" /><span>1</span><br />
        <input type="checkbox" value="2" /><span>2</span><br />
        <input type="checkbox" value="3" /><span>3</span><br />
        <script>
         var inps = document.getElementsByTagName('input'),
    len = inps.length,
    spans = document.getElementsByTagName('span');

    for(var i = 0; i < len; i++){
    !function(i){
    inps[i].onclick = function(){
    if(this.checked){
    spans[i].style.background = '#333';
    }else{
    spans[i].style.background = '';
    }
    };
    }(i)
    }
        </script>
    </body>
    </html>
    给你个例子，如果你前面是图标的话，就做出来两个图，一个是亮的一个是不亮的。
    然后改变图片的src属性就行了~·
      

  2.   

    不好意思 能说的详细一点吗 我试过您的例子 显示的是多选框 我要得是单选框 我将type属性改为redio 好像就无法操作了 这个是什么情况呢 
      

  3.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" src="http://www.wanmei.com/public/js/jq_132.js"></script>
    <style>
    span{width:100px; background:}
    </style>
    </head><body>
        <input type="radio" value="1" name="a" /><span>1</span><br />
        <input type="radio" value="2" name="a" /><span>2</span><br />
        <input type="radio" value="3" name="a" /><span>3</span><br />
        <script>
            var inps = document.getElementsByTagName('input'),
            len = inps.length,
            spans = document.getElementsByTagName('span');
            
            for(var i = 0; i < len; i++){
                !function(i){
                    inps[i].onclick = function(){
    for(var j = 0; j < spans.length; j++){
    spans[j].style.background = '';
    }
                        if(this.checked){
                            spans[i].style.background = '#333';
                        }
                    };    
                }(i)    
            }
        </script>
    </body>
    </html>
      

  4.   


    你得改变图片的src地址~·
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" src="http://www.wanmei.com/public/js/jq_132.js"></script>
    <style>
    span{width:100px; background:}
    </style>
    </head><body>
        <input type="radio" value="1" name="a" /><img src="1.jpg" /><br />
        <input type="radio" value="2" name="a" /><img src="1.jpg" /><br />
        <input type="radio" value="3" name="a" /><img src="1.jpg" /><br />
        <script>
            var inps = document.getElementsByTagName('input'),
            len = inps.length,
            imgs = document.getElementsByTagName('img');
            
            for(var i = 0; i < len; i++){
                !function(i){
                    inps[i].onclick = function(){
                        for(var j = 0; j < imgs.length; j++){
                            imgs[j].src = '1.jpg'; //这里写不亮的图标地址
                        }
                        if(this.checked){
                            imgs[i].src = '2.jpg';//在这写亮的那个图标
                        }
                    };    
                }(i)    
            }
        </script>
    </body>
    </html>