一道前端开发题目，会的来做下

左图为RadioBox(单项选择框)形式之一，请提供实现思路。（考虑数据提交、优雅降级）============
求达人

解决方案 »

  1.   

    这个不是 淘宝ued的小测试吗？
    http://www.lanrentuku.com/js/form-723.htmlhttp://zyiangel.blogbus.com/logs/109197922.html
    空了 稍后 写一个。
      

  2.   


    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="gb2312" />
    <title></title>
    <style>
    ul {margin:0; padding:0; list-style:none; }

    ul {
    margin:200px;
    font-family:arial;
    }
    li {
    position:relative;
    float:left;
    margin-right:10px;
    width:36px; height:36px;
    background:url(http://i.vanclimg.com/joinimages.ashx?d=/36/product/&href=0/1/7/017364/76590,0/1/7/017364/16010,0/1/7/017364/05720,0/1/7/017363/95720,0/1/7/017363/75420,0/1/7/017364/66590,0/1/7/017364/56300,0/1/7/017364/46300,0/1/7/017364/36300,0/1/7/017364/26010,0/1/7/017363/85420,0/1/7/017363/65420) no-repeat;
    border:1px solid #ddd;
    cursor:pointer;
    }
    .pro2 {
    background-position:0 -72px;
    }
    .pro3 {
    background-position:0 -144px;
    }
    li span {
    display:none;
    position:absolute; right:0; bottom:0;
    width:14px; height:13px; overflow:hidden;
    background:url(http://i4.vanclimg.com/others/2012/4/25/sprites1.png) no-repeat -1151px 0;
    }
    .cur {
    border-color:#a10;
    }
    </style>
    </head>
    <body>
    <ul id="pro">
    <li title="商品1"><span></span></li>
    <li title="商品2" class="pro2"><span></span></li>
    <li title="商品3" class="pro3"><span></span></li>
    </ul>
    <input id="text" />
    <script>
    ;(function(){
    var $ = function(id){
    return document.getElementById(id);
    };
    var $t = function(tag, cot){
    cot = cot || document;
    return cot.getElementsByTagName(tag);
    };
    var objs = $t('li', $('pro'));
    var cur;
    var text = $('text');
    for(var i = 0, len = objs.length; i < len; i++){
    objs[i].onclick = function(){
    this.className += ' cur';
    $t('span', this)[0].style.display = 'block';
    text.value = this.title;
    if(cur){
    cur.className = cur.className.replace(' cur', '');
    $t('span', cur)[0].style.display = 'none';
    }
    cur = this;
    }
    }
    })();
    </script>
    </body>
    </html>