模拟 html radio 的单选效果

原創

阿非

2020-02-21 05:19

效果图:

代码如下:

（jQuery版）

<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' οnclick='change(this);' >卡其格</span> <span class='unchecked' name='colorSpan' checked='false' οnclick='change(this);' >黑白格</span> </div> <br /> <br /> <div> 尺码: <span class='unchecked' name='sizeSpan' checked='false' οnclick='change(this);' >S</span> <span class='unchecked' name='sizeSpan' checked='false' οnclick='change(this);' >M</span> <span class='unchecked' name='sizeSpan' checked='false' οnclick='change(this);' >L</span> </div> <br /> <br /> <div> <b>提示:</b> <span id='resultSpan'></span> </div> </body> </html>

(纯JS版)

<html> <style> .unchecked { border: 1px solid gray; padding: 6px 6px 6px 6px; } .checked { border: 2px solid #c00; padding: 6px 6px 6px 6px; } </style> <body> <br /> <div> 颜色: <span class='unchecked' name='colorSpan'>卡其格</span> <span class='unchecked' name='colorSpan'> 黑白格</span> </div> <br /> <br /> <div> 尺码: <span class='unchecked' name='sizeSpan'>S</span> <span class='unchecked' name='sizeSpan'> M</span> <span class='unchecked' name='sizeSpan'>L</span> </div> <br /> <br /> <div> <b>提示:</b> <span id='resultSpan'></span> </div> </body> </html>