點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>