JS 实现弹出式复选框
小弟想做一个弹出式的复选框，就是从一个输入框，点击在下面出现一些复选框，选择之后点击确定将选择的内容返回到输入框里。再次点击可以将输入框中已经选择的内容返回给复选框中，实现可以修改选择的功能。研究了大半天。网上许多例子都看过了，由于几乎不会JS。。 勉强看的懂但是不会改成我想要的样子。。 求前辈指引。。
esayui 演示范例-->表单相关-->下拉选择框
[解决办法]
easy UI都有插件可以实现的，可以查下api。
http://www.phptogether.com/juidoc/index.htm
[解决办法]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Combo - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic Combo</h2>
<div class="demo-info" style="margin-bottom:10px">
<div class="demo-tip icon-tip"></div>
<div>Click the right arrow button to show drop down panel that can be filled with any content.</div>
</div>
<select id="cc" style="width:150px"></select>
<div id="sp">
<div style="color:#99BBE8;background:#fafafa;padding:5px;">Select a language</div>
<input type="radio" name="lang" value="01"><span>Java</span><br/>
<input type="radio" name="lang" value="02"><span>C#</span><br/>
<input type="radio" name="lang" value="03"><span>Ruby</span><br/>
<input type="radio" name="lang" value="04"><span>Basic</span><br/>
<input type="radio" name="lang" value="05"><span>Fortran</span>
</div>
<script type="text/javascript">
$(function(){
$('#cc').combo({
required:true,
editable:false
});
$('#sp').appendTo($('#cc').combo('panel'));
$('#sp input').click(function(){
var v = $(this).val();
var s = $(this).next('span').text();
$('#cc').combo('setValue', v).combo('setText', s).combo('hidePanel');
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Multiple Select - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Load Dynamic ComboBox Data</h2>
<div alt="JS 兑现弹出式复选框" />
其他的api里面都有的，自己看看吧，一个是
[解决办法]
自己写了一个，ie6,chrome测试过，测试前请导入jquery<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
.container {position:absolute; display:none; padding-left:10px;}
.shadow {float:left;}
.frame {position:relative; background:#fff; padding:6px; display:block;
-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
}
.clear {clear:left;}
label,a {font-size:13px;color:#4f6b72;}
#language {font-size:13px;color:#4f6b72;border:1px solid #4f6b72;height:20px;}
div.frame div {margin-bottom:5px;}
div.frame div.foot {margin-top:10px;}
div.frame label {margin: 0 10px 0 5px;}
div.frame a:link,div.frame span a:visited {
text-decoration:none;
}
</style>
<!--[if IE]>
<style type="text/css">
.container {padding-left:14px;}
.frame {left:4px; top:4px;}
.shadow {background:#000; margin:-2px 0px 0px 0px; filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5', MakeShadow='true', ShadowOpacity='0.60');}
</style>
<![endif]-->
<script language="javascript" src="jquery.js"></script>
</head>
<body>
<!--http://bbs.csdn.net/topics/390520923 -->
<label for="language">选择城市：</label><input type="text" id="language"/>
<div class="container">
<div class="shadow">
<div class="frame">
<div><input type="checkbox" id="location0"/><label for="location0">北京</label></div>
<div><input type="checkbox" id="location1"/><label for="location1">上海</label></div>
<div><input type="checkbox" id="location2"/><label for="location2">广州</label></div>
<div><input type="checkbox" id="location3"/><label for="location3">深圳</label></div>
<div><input type="checkbox" id="location4"/><label for="location4">南京</label></div>
<div><input type="checkbox" id="location5"/><label for="location5">天津</label></div>
<div class="foot"><a href="#" id="submit">确定</a></div>
</div>
</div>
</div>
<script language="javascript">
$('#language').bind('focus', function() {
var offset = $(this).offset(), container = $('div.container');
container.css({top:offset.top+Number($(this).css('height').replace('px', '')), left:offset.left}).show(100);
});
$(document).bind('click', function(){
var targ;
if (event.target) targ = event.target
else if (event.srcElement) targ = event.srcElement
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;
if (targ.id !='language' && !$(targ).parents('div.container').attr('class'))
$('div.container').hide(100);
});
$('#submit').bind('click', function(){
var vals = '', length;
$('div.frame input[type=checkbox]:checked').each(function(){
vals += ($(this).next().text() + ';');
});
if ((length = vals.length) > 0) vals = vals.substr(0, length -1);
$('#language').val(vals);
$('div.container').hide(100);
});
</script>
</body>
</html>
