模拟 html radio 的单选成效单选商品属性大小、颜色 _HTML/CSS

模拟 html radio 的单选效果单选商品属性大小、颜色

<html>?
<style>?
.unchecked{?
? border: 1px solid gray;?
? padding: 6px 6px 6px 6px;?
}?
.checked{?
? border: 2px solid #c00;?
? padding: 6px 6px 6px 6px;?
}?
</style>?
<script src="http://code.jquery.com/jquery-1.4.2.min.js" ></script>?
<script type="text/javascript">?
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+='<font color=orange>"'+ obj[i]+'"</font> 、';?
?????????? }?
??? }?
??? html='<b>已选择:</b> '+html.slice(0,html.length-1);?
??? $('#resultSpan').html(html);?
????
}?
</script>?
<body>?
<br />?
<div>?
颜色:? <span class='unchecked'? name='colorSpan' checked='false' onclick='change(this);' >卡其格</span> <span class='unchecked' name='colorSpan' checked='false' onclick='change(this);' >黑白格</span>?
</div>?
<br />?
<br />?
<div>?
尺码:? <span class='unchecked'? name='sizeSpan'? checked='false' onclick='change(this);' >S</span> <span class='unchecked' name='sizeSpan' checked='false' onclick='change(this);' >M</span> <span class='unchecked' name='sizeSpan' checked='false' onclick='change(this);' >L</span>?
</div>?
<br />?
<br />?
<div>?
<b>提示:</b>? <span id='resultSpan'></span>?
</div>?
</body>?
</html>

模拟 html radio 的单选成效 单选商品属性大小、颜色

模拟 html radio 的单选成效单选商品属性大小、颜色