选择复选框实时将复选框内容添加到input文本框

先看下效果!

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);
	 });


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值