点input框，弹出一个多选框checkbox，进行选择，每个以逗号隔开

点input框，弹出一个多选框，进行选择，每个以逗号隔开，如上图所示

1. <input id="taskPlanDay" name="taskPlanDay" type="text" style="width: 150px" class="inputxt" readonly="readonly"

datatype="*"

>

2.js片段

<script language="javascript">

$('#taskPlanDay').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 !='taskPlanDay' && !$(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);

$('#taskPlanDay').val(vals);

$('div.container').hide(100);

});

$('#close').bind('click', function(){

$('div.container').hide(100);

});

</script>

2.<div>代码块

<div class="container">

<div class="shadow">

<div class="frame">

<div><input type="checkbox" id="location01"/><label for="location01">01</label></div>

<div><input type="checkbox" id="location02"/><label for="location02">02</label></div>

<div><input type="checkbox" id="location03"/><label for="location03">03</label></div>

<div><input type="checkbox" id="location04"/><label for="location04">04</label></div>

<div><input type="checkbox" id="location05"/><label for="location05">05</label></div>

<div><input type="checkbox" id="location06"/><label for="location06">06</label></div>

<div><input type="checkbox" id="location07"/><label for="location07">07</label></div>

<div><input type="checkbox" id="location08"/><label for="location08">08</label></div>

<div><input type="checkbox" id="location09"/><label for="location09">09</label></div>

<div><input type="checkbox" id="location10"/><label for="location10">10</label></div>

<div><input type="checkbox" id="location11"/><label for="location11">11</label></div>

<div><input type="checkbox" id="location12"/><label for="location12">12</label></div>

<div><input type="checkbox" id="location13"/><label for="location13">13</label></div>

<div><input type="checkbox" id="location14"/><label for="location14">14</label></div>

<div><input type="checkbox" id="location15"/><label for="location15">15</label></div>

<div><input type="checkbox" id="location16"/><label for="location16">16</label></div>

<div><input type="checkbox" id="location17"/><label for="location17">17</label></div>

<div><input type="checkbox" id="location18"/><label for="location18">18</label></div>

<div><input type="checkbox" id="location19"/><label for="location19">19</label></div>

<div><input type="checkbox" id="location20"/><label for="location20">20</label></div>

<div><input type="checkbox" id="location21"/><label for="location21">21</label></div>

<div><input type="checkbox" id="location22"/><label for="location22">22</label></div>

<div><input type="checkbox" id="location23"/><label for="location23">23</label></div>

<div><input type="checkbox" id="location24"/><label for="location24">24</label></div>

<div><input type="checkbox" id="location25"/><label for="location25">25</label></div>

<div><input type="checkbox" id="location26"/><label for="location26">26</label></div>

<div><input type="checkbox" id="location27"/><label for="location27">27</label></div>

<div><input type="checkbox" id="location28"/><label for="location28">28</label></div>

<div><input type="checkbox" id="location29"/><label for="location29">29</label></div>

<div><input type="checkbox" id="location30"/><label for="location30">30</label></div>

<div><input type="checkbox" id="location31"/><label for="location31">31</label></div>

<div class="foot" style="text-agiln:right" style="margin:0 8px"><a href="#" id="submit" margin-right:20px>确定</a><a href="#" id="close" margin-right:20px>取消</a></div>

</div>

</div>

</div>

3.css样式代码

<style type="text/css">

.container {position:absolute; display:none; padding-left:10px;}

.shadow {float:left;}

.frame {position:relative; background:#ffc; 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);

overflow: hidden;

width:310px

}

.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; float:left}

div.frame div.foot {margin-top:15px; text-agiln:right; margin-right:20px; float:right}

div.frame div.foot.a{margin-right:20px}

div.frame label {margin: 0 10px 0 5px;}

div.frame a:link,div.frame span a:visited {

text-decoration:none; margin:0 8px;

</style>