先看下效果!
html代码:
<input name="txt_tqys" id="txt_tqys" value="" class="myline" style="width:260px;" readonly="readonly" type="text" οnmοuseοver="xzrq()" οnmοuseοut="lkxzrq()">
<div class="jnNav" style="display: none;" οnmοuseοver="xzrq()" οnmοuseοut="lkxzrq()">
<div class="subitem" id="subitemys" >
<dl class="fore">
<dt style="line-height:18px;" >选择日期</dt>
<dd>
<ul style="line-height: 18px; list-style: none;">
<li>
<input id="ys1" class="yscbbox" name="chkItemYs" value="1" title="1" type="checkbox"><label for="ys1">01</label></li>
<li>
<input id="ys2" class="yscbbox" name="chkItemYs" value="2" title="2" type="checkbox"><label for="ys2">02</label></li>
<li>
<input id="ys3" class="yscbbox" name="chkItemYs" value="3" title="3" type="checkbox"><label for="ys3">03</label></li>
<li>
<input id="ys4" class="yscbbox" name="chkItemYs" value="4" title="4" type="checkbox"><label for="ys4">04</label></li>
<li>
<input id="ys5" class="yscbbox" name="chkItemYs" value="5" title="5" type="checkbox"><label for="ys5">05</label></li>
<li>
<input id="ys6" class="yscbbox" name="chkItemYs" value="6" title="6" type="checkbox"><label for="ys6">06</label></li>
<li>
<input id="ys7" class="yscbbox" name="chkItemYs" value="7" title="7" type="checkbox"><label for="ys7">07</label>
</li>
</ul>
<ul style="line-height: 18px; list-style: none;">
<li>
<input id="ys8" class="yscbbox" name="chkItemYs" value="8" title="8" type="checkbox"><label for="ys8">08</label></li>
<li>
<input id="ys9" class="yscbbox" name="chkItemYs" value="9" title="9" type="checkbox"><label for="ys9">09</label></li>
<li>
<input id="ys10" class="yscbbox" name="chkItemYs" value="10" title="10" type="checkbox"><label for="ys10">10</label></li>
<li>
<input id="ys11" class="yscbbox" name="chkItemYs" value="11" title="11" type="checkbox"><label for="ys11">11</label></li>
<li>
<input id="ys12" class="yscbbox" name="chkItemYs" value="12" title="12" type="checkbox"><label for="ys12">12</label></li>
<li>
<input id="ys13" class="yscbbox" name="chkItemYs" value="13" title="13" type="checkbox"><label for="ys13">13</label></li>
<li>
<input id="ys14" class="yscbbox" name="chkItemYs" value="14" title="14" type="checkbox"><label for="ys14">14</label>
</li>
</ul>
<ul style="line-height: 18px; list-style: none;">
<li>
<input id="ys15" class="yscbbox" name="chkItemYs" value="15" title="15" type="checkbox"><label for="ys15">15</label></li>
<li>
<input id="ys16" class="yscbbox" name="chkItemYs" value="16" title="16" type="checkbox"><label for="ys16">16</label></li>
<li>
<input id="ys17" class="yscbbox" name="chkItemYs" value="17" title="17" type="checkbox"><label for="ys17">17</label></li>
<li>
<input id="ys18" class="yscbbox" name="chkItemYs" value="18" title="18" type="checkbox"><label for="ys18">18</label></li>
<li>
<input id="ys19" class="yscbbox" name="chkItemYs" value="19" title="19" type="checkbox"><label for="ys19">19</label></li>
<li>
<input id="ys20" class="yscbbox" name="chkItemYs" value="20" title="20" type="checkbox"><label for="ys20">20</label></li>
<li>
<input id="ys21" class="yscbbox" name="chkItemYs" value="21" title="21" type="checkbox"><label for="ys21">21</label>
</li>
</ul>
<ul style="line-height: 18px; list-style: none;">
<li>
<input id="ys22" class="yscbbox" name="chkItemYs" value="22" title="22" type="checkbox"><label for="ys22">22</label></li>
<li>
<input id="ys23" class="yscbbox" name="chkItemYs" value="23" title="23" type="checkbox"><label for="ys23">23</label></li>
<li>
<input id="ys24" class="yscbbox" name="chkItemYs" value="24" title="24" type="checkbox"><label for="ys24">24</label></li>
<li>
<input id="ys25" class="yscbbox" name="chkItemYs" value="25" title="25" type="checkbox"><label for="ys25">25</label></li>
<li>
<input id="ys26" class="yscbbox" name="chkItemYs" value="26" title="26" type="checkbox"><label for="ys26">26</label></li>
<li>
<input id="ys27" class="yscbbox" name="chkItemYs" value="27" title="27" type="checkbox"><label for="ys27">27</label></li>
<li>
<input id="ys28" class="yscbbox" name="chkItemYs" value="28" title="28" type="checkbox"><label for="ys28">28</label>
</li>
</ul>
<ul style="line-height: 18px; list-style: none;">
<li>
<input id="ys29" class="yscbbox" name="chkItemYs" value="29" title="29" type="checkbox"><label for="ys29">29</label></li>
<li>
<input id="ys30" class="yscbbox" name="chkItemYs" value="30" title="30" type="checkbox"><label for="ys30">30</label></li>
<li>
<input id="ys31" class="yscbbox" name="chkItemYs" value="31" title="31" type="checkbox"><label for="ys31">31</label></li>
</ul>
</dd>
</dl>
</div>
</div>
JS代码:
//选择复选框实时将内容添加到input文本框
$('input[name="chkItemYs"]').change(function(){
var result="";
$("input[name='chkItemYs']:checked").each(function(){
result+=$(this).val()+'、';
});
if(result!=""){
result=result.substring(0,result.lastIndexOf('、'));
}
$("#txt_tqys").val(result);
});