日期:2014-05-17 浏览次数:21121 次
<!doctype html> <html> <head> <meta charset="gb2312" /> <title></title> <style> * { margin:0; padding:0; } body { font-size:12px; padding:20px; } #box { width:300px; border:1px solid red; padding:3px; display:none; } #close { float:right; padding:3px; border:1px solid #999; cursor:pointer; } </style> </head> <body> 运动项目:<input id="con" /> <div id="box"> <div id="close" onclick="$('box').style.display='none'">×关闭</div> <div style="clear:both;"></div> <input type="checkbox" name="sports" value="足球" />足球 <input type="checkbox" name="sports" value="篮球" />篮球 <input type="checkbox" name="sports" value="乒乓球" />乒乓球 </div> <script> function $(o){return document.getElementById(o)} $('con').onfocus = function(){ var box = $('box'); var sports = document.getElementsByName('sports'); box.style.display = 'block'; for( var i = 0, len = sports.length; i < len; i++ ){ sports[i].onclick = function(){ $('con').value += $('con').value ? ',' + this.value : this.value; } } } </script> </body> </html>