日期:2014-05-17 浏览次数:21280 次
<!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>