html radio效果,模拟 html radio 的单选效果

效果图:

代码如下:

(jQuery版)

.unchecked{

border: 1px solid gray;

padding: 6px 6px 6px 6px;

}

.checked{

border: 2px solid #c00;

padding: 6px 6px 6px 6px;

}

var obj={

colorSpan:"",

sizeSpan:""

};

function change(span)

{

$('span[name="'+$(span).attr('name')+'"]').each(function(){

if(this.checked&&this!=span)

{

this.className="unchecked";

this.checked=false;

}

});

obj[$(span).attr('name')]=span.innerHTML;

span.className="checked";

span.checked=true;

select();

}

function select()

{

var html='';

for(var i in obj)

{

if(obj[i]!='')

{

html+='"'+ obj[i]+'" 、';

}

}

html='已选择: '+html.slice(0,html.length-1);

$('#resultSpan').html(html);

}

颜色:  卡其格 黑白格

尺码:  S M L

提示:  

(纯JS版)

.unchecked

{

border: 1px solid gray;

padding: 6px 6px 6px 6px;

}

.checked

{

border: 2px solid #c00;

padding: 6px 6px 6px 6px;

}

颜色: 卡其格

黑白格

尺码: S

M L

提示:

原帖地址: