<!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>【購物顏色、尺寸選擇】Span模擬單選按鈕Radio</title><style type="text/CSS">.unchecked { border: 1px solid gray; padding: 6px 6px 6px 6px; cursor: pointer;}.checked { border: 2px solid #c00; padding: 6px 6px 6px 6px; cursor: pointer;}</style></head><body></body><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><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></html>
新聞熱點
疑難解答
