QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 表单代码 > jQuery全选列表穿梭框代码

jQuery全选列表穿梭框代码

jQuery文字列表全选,点击左右箭头按钮控制穿梭框列表代码。
分享到微信朋友圈
X

使用方法:

1、head引入css文件

<link rel="stylesheet" type="text/css" href="css/index.css"/>

2、head引入js文件

<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>

3、body引入HTML代码

<div class="selection-container">
	<div class="select-box left">
		<div class="select-box-title">
			<input type="checkbox" class="checkbox-all" id="checkbox-all1" />
			<label for="checkbox-all1"></label>
			<span>列表一</span>
		</div>
		<div class="select-content">
			<ul class="unselect-ul">
				<li>
					<input type="checkbox" class="checkboxs"  id="tyue-checkbox-blue1" />
					<label for="tyue-checkbox-blue1"></label>
					<span>备选项1</span>
				</li>
				<li>
					<input type="checkbox" class="checkboxs" id="tyue-checkbox-blue2" />
					<label for="tyue-checkbox-blue2"></label>
					<span>备选项2</span>
				</li>
				<li>
					<input type="checkbox" class="checkboxs" id="tyue-checkbox-blue3" />
					<label for="tyue-checkbox-blue3"></label>
					<span>备选项3</span>
				</li>
				<li>
					<input type="checkbox" class="checkboxs" id="tyue-checkbox-blue4" />
					<label for="tyue-checkbox-blue4"></label>
					<span>备选项4</span>
				</li>
				<li>
					<input type="checkbox" class="checkboxs" id="tyue-checkbox-blue5" />
					<label for="tyue-checkbox-blue5"></label>
					<span>备选项5</span>
				</li>
				<li>
					<input type="checkbox" class="checkboxs" id="tyue-checkbox-blue6" />
					<label for="tyue-checkbox-blue6"></label>
					<span>备选项6</span>
				</li>
				<li>
					<input type="checkbox" class="checkboxs" id="tyue-checkbox-blue7" />
					<label for="tyue-checkbox-blue7"></label>
					<span>备选项7</span>
				</li>
				<li>
					<input type="checkbox" class="checkboxs" id="tyue-checkbox-blue8" />
					<label for="tyue-checkbox-blue8"></label>
					<span>备选项8</span>
				</li>
			</ul>
		</div>
	</div>
	<div class="arrows-box">
		<div class="arrow-btns">
			<button class="arrow-btn right">
				<svg class="icon icon-seach" aria-hidden="true">
					<use xlink:href="#icon-com-dajiantouyou"></use>
				</svg>
			</button>
			<button class="arrow-btn left">
				<svg class="icon icon-seach" aria-hidden="true">
					<use xlink:href="#icon-com-dajiantouzuo"></use>
				</svg>
			</button>
		</div>
	</div>
	<div class="select-box right">
		<div class="select-box-title">
			<input type="checkbox" class="checkbox-all" id="checkbox-all2" />
			<label for="checkbox-all2"></label>
			<span>列表二</span>
		</div>
		<div class="select-content">
			<ul class="selected-ul">
				<li>
					<input type="checkbox" class="checkboxs" id="tyue-checkbox-blue9" />
					<label for="tyue-checkbox-blue9"></label>
					<span>备选项9</span>
				</li>
				<li>
					<input type="checkbox" class="checkboxs" id="tyue-checkbox-blue10" />
					<label for="tyue-checkbox-blue10"></label>
					<span>备选项10</span>
				</li>
				<li>
					<input type="checkbox" class="checkboxs" id="tyue-checkbox-blue11" />
					<label for="tyue-checkbox-blue11"></label>
					<span>备选项11</span>
				</li>
			</ul>
		</div>
	</div>
</div>

<!--穿梭框方法-->
<script src="js/index.js"></script>

<!--图标调用,可忽略-->
<script src="js/iconfont.js"></script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
畅彩 www.9948.biz-57期福彩-| www.91lj.com-萌蔻q彩小馒头| www.567888.com-今日彩票号是什么| www.618880.com-盛兴彩票网登录| www.716202.com-彩铅画润玉-| www.835812.com-好彩三八是什么意思| www.961436.com-3d福彩论坛手机板| www.zg.cc-彩票技巧规律和口诀| www.028603.com-盛彩网买彩票| www.139470.com-共享彩票怎么玩| www.505251.com-39彩票平台-| www.597515.com-如何在网上买彩票| www.693149.com-今天甘肃快三推荐| www.796595.cc-众博彩票99-| www.k10.shop-彩吧网更懂彩民| www.50mr.com-鲸彩漆有什么缺点| www.07693.com-今天3d彩圣字谜| www.244422.com-彩票开奖大乐透查询| www.357076.com-青岛福彩咨询电话| www.455079.com-彩漂坊-| www.554446.com-足彩广告语-| www.647255.com-买彩下载软件| www.290997.com-地方彩票开奖| www.666889.cc-乐彩怎么玩才能赢钱| www.498066.com-神兽竞彩团队公众号| www.624896.com-速8彩票邀请码| www.707227.com-彩票app签到活动| www.801563.com-彩票史最大弃奖| www.872555.com-体彩十一选五山西| www.948179.com-众彩网3d专家汇总| 豪彩VIPwww.7fk.com| www.668015.com-彩无双登录-| www.98rf.com-买彩票的案件| www.17345.com-雪象园足彩比分直播| www.007253.com-幸福彩app-| www.130362.com-福彩双色球技巧| www.785848.com-七星彩预测最准软件| www.888342.com-中彩网邀请码怎么弄| www.972208.com-山东福彩双色球| www.18la.com-彩票每日首存| www.1684.tv-北京28彩票软件| www.6199.win-三分彩五分彩| www.218213.com-单机新快三恐龙快打| www.316775.com-福利彩票图案| www.399102.com-七呈彩开奖结果查询| www.509318.com-春节彩票停售时间| www.578727.com-福利彩票店面装修| www.653673.com-亚州彩票首页| www.723314.com-彩票不中奖-| www.796631.com-l竞彩-| www.505623.com-炫彩水晶泥下载| www.598413.com-体彩第19027期| www.676711.com-易彩快3大小单双句| www.68eg.com-足彩竞彩网258| www.3468.org-中彩快三计划| www.9655.online彩一网正版藏机图| www.85223.com-如何买彩票中五百万| www.811680.com-菲律宾太子彩票客服| www.996700.com-骑士致富团队买彩票| www.oj68.com-吉林福彩中心| www.789.mobi-海南彩票规律直播室| www.94ip.com-彩票顶级包网| www.670071.com-海南彩网-| www.765325.com-快三一分钟书籍| www.833344.com-体彩店二维码| www.900811.com-500彩票网官网| www.962341.com-湖兆省快三开奖查询| 乐发彩票www.225779.com| www.322999.cc-彩票查询开奖结果询| www.340766.com-牛彩网一采摘网| www.906618.com-彩票平台送彩金39| 环球彩票www.81455.com| www.604518.com-信信彩票-| www.052667.com-中国足球彩票下载| www.501323.com-易彩堂预测-| TT彩票www.133615.com| www.vn75.com-安徽福彩怏三走势图| www.14zp.com-关于结婚要不要彩礼| www.331774.com-乐彩三d字谜专区| www.390330.com-彩票群主-| www.541643.com-500竞彩完场比分| www.752616.com-福利彩票手机怎么买| www.872465.com-彩票五分快三计划| www.528171.com-汇丰彩票平台可信吗| www.xw06.com-澳发彩票手机版| www.102032.com-足彩2串1全包买法| www.565196.com-福彩3d太湖字谜解| 中国福利彩票www.33588y.com| www.ek10.com-彩吧论坛图谜总汇| www.w38.cc-长春彩溢为什么关门| www.54eh.com-专业玩彩胡先生预测| www.789312.com-九九四天下彩cc| www.859953.com-七星彩走式图| www.3735.cn-彩票管家安全吗| www.00734.cc-微信北京快三走势图| www.506139.com-网络彩票可以控制吗| www.580508.com-疯狂赛车彩票计划| www.653517.com-辉煌彩票指导| www.716844.com-大鱼海棠彩铅手绘图| www.845454.cc-体育彩票销售返点| www.907823.com-新浪爱彩购票大厅| www.964809.com-江苏e球彩查询| www.cp0996.com-最精准快三计划平台| www.576383.com-怎么下载快三游戏| www.651854.com-福彩大乐透双色球| www.717367.com-蒙娜丽莎彩铅画| www.806578.com-彩票32期中奖号| www.869763.com-七星彩排列五app| www.927608.com-福利彩票害人输千万| www.982666.com-三分时时彩人工计划| www.cp0506.com-极速快三破解软件| www.im31.com-5分时时彩计划| www.sy.cc-银川快三查询| www.1063.net-类似于彩名堂的软件| www.615323.com-网络彩票报案有用吗| www.033256.com-网盈彩票软件下载| www.nn47.com-体育竞彩app投注| www.40sg.com-足球竞彩胜平负开奖| www.666921.com-乐彩网有毒吗| www.189060.com-福彩3d500期| www.499666.cc-彩票高级师培训班| www.192562.com-推荐几个彩票app| www.313822.com-赢彩吧app-| www.185164.com-福彩的理念-| www.680636.com-爱中彩-| www.062.gg-宁波体彩领奖在几楼| www.55631.cc-神灯彩票高倍奖金| www.nq31.com-福利彩票在线选号| www.ae31.com-数字彩票频道| www.664728.com-七乐彩开奖在哪里看| www.786275.com-大赢家正规彩票| www.988250.com-中彩彩-| www.071280.com-国家级体彩培训师| www.jj44.com-2020彩票-| www.12557.com-福建省福彩中心主任| www.97578.com-时时彩趋势-| www.cp0048.com-苹果快三助手| www.44ny.com-押大小的彩票| www.154507.com-如何在高频彩里赚钱| www.873941.com-杭州福利彩票官网| www.960326.com-买彩票而穷漫画| 彩票大家乐www.21202b.com| www.436492.com-陕西体育彩票app| www.530881.com-六给彩彩票香港直播| www.678081.com-快三最准下期号码| www.769608.com-欧盟绿好彩-| www.833013.com-彩77ios下载| www.0980.vip-粤彩网广东11选5| www.410084.com-彩票大乐透的软件| www.34875.com-新彩吧走势图| www.843063.com-中国最早彩票| www.276927.com-黑彩怎么控制开奖| www.266217.com-河北省福彩开奖公告| www.6030.vip-云南省体彩中心电话| www.31352.com-福彩3d预侧分析| www.29550.com-乐彩网是骗人的| www.653032.com-8炫彩游戏规则| www.155445.com-福彩3地丹东图谜| www.222649.com-七乐彩中奖查询| www.301164.com-南方双彩最专业| www.373798.com-24小时高频彩票| www.01695.com-高频彩走势图| www.5713.me-三彩玉图片-| www.356782.com-中国红彩票20|