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.700599.com-网上彩票如何兑奖| www.12738.cc-pc28彩票-| www.52xs.com-高频彩缩水器| www.592126.com-什么彩票能中一个亿| www.0154.pw-服务大厅新浪爱彩| www.274577.com-生日号码怎么买彩票| www.956303.com-打彩网站-| www.cp377.cc-玩福彩快三能赚钱嘛| www.td11.cc-快三时时彩计划软件| www.375.win-天天买彩票大全| www.7765.loan-带九字的彩票| www.64538.com-福利彩票真的假的| www.262321.com-福利彩票中奖| www.358457.com-中国福彩2206期| www.456336.cc-快钱彩app安全吗| www.329629.com-3d彩票正版藏机图| www.439907.com-彩票平台花呗支付| www.755124.com-青岛福彩湛山养老院| www.865574.com-彩票加盟代理| www.956697.com-彩票疑云完整版| www.cp420.cc-一分快三正规平台| www.pf89.com-快三平台属于赌博吗| www.540310.com-彩票大赢家下载| www.623151.com-幸运彩票是真的假的| www.700096.com-万彩网官网-| www.789297.com-河南规定彩礼如何看| www.874152.com-七皇彩开奖结果| www.947575.com-体彩福彩合并的建议| 世彩堂www.5854v.cc| www.629992.com-福彩数字3中奖| www.703866.com-福彩3d彩圣双胆| www.789820.cc-澳客网篮球竞彩比分| www.872203.com-河北省体彩网| www.947636.com-买彩票心得-| www.999529.com-128彩票网站| www.eg66.com-一分彩在线人工计划| www.vt51.com-快乐彩开奖走势图表| www.448.tv-福彩3d高概率杀号| www.855117.com-甘肃微信彩票群| www.920968.com-彩票争霸v-| www.983634.com-民政局福彩中心工作| www.md2.cc-5分彩怎么看号| www.82.cc-易发彩是不是诈骗| www.59565.com-ip代玩彩票兼职| www.409688.com-查询乐e乐彩网址| www.627699.com-在线全天时时彩计划| www.48261.com-腾讯时时彩计划软件| www.32828.cc-许昌灵井彩礼| www.501278.com-亿迷彩下载-| www.681656.com-彩票怎么电话投注| www.933052.com-快乐中彩票下载安装| 博友彩www.938537.com| www.40890.com-体彩大乐透开奖l| www.016036.com-彩票开奖查寻| www.93638.com-中国竞彩网手机软件| www.109244.com-中国星彩3d论坛预| www.080928.com-福建31彩票走势图| www.016006.com-彩票复制是怎么算的| www.809758.com-手机怎么合法买彩票| www.830076.com-福彩快3和值表| www.776188.com-心赢彩票-| www.880874.com-火箭彩票网打不开| www.990803.com-彩票33辅助软件| www.35ij.com-彩票烂了一点能用| www.2950.vip-福彩店子图片| www.8212.top-大富彩票黑平台| www.455466.cc-彩票区块链平台| www.6087.biz-在中国买美国彩票| www.262695.com-长春市福彩中心电话| www.890812.com-青岛市福彩中心| 顶级娱乐www.643388.com| www.sh69.cc-香港福利彩票资料站| www.222776.com-五分快三免费计划网| www.795563.com-天天彩票安卓版下载| www.796108.com-快三最高多少期不中| www.hm68.com-时时彩包胆看号技巧| www.069075.com-彩票新闻网-| www.137617.com-帮黑客投彩票骗局| www.48145.com-彩票之家下载链接| www.612609.com-巴西三分彩官网| www.81164.com-即时开彩手机版| www.143003.com-彩虹店铺上买彩票| www.xl93.com-80彩票高手计划| www.932700.com-试机号彩宝网| www.749888.com-弘鑫娱乐彩票| www.o05.org-彩票设计原理| www.80zu.com-福利彩票投注站好吗| www.3836.org-苏宁彩票官网| www.792910.com-阜阳福彩兑奖地址| www.465950.com-广西玩彩乐首页| www.016573.com-网易彩票首页| www.kp16.com-中彩堂开奖记录| www.991.live-体彩开奖怎么看中奖| www.20944.com-竞彩足彩今日稳胆| www.78844.com-双色球预测彩吧网| www.045118.com-低价转让福彩机器| www.813634.com-宁夏体彩网点| www.888228.com-乐彩合买是骗局| www.955987.com-推荐彩票计划app| 500彩票www.500109.com| www.929750.com-彩票扣税-| www.223036.com-贵州体育彩票查询| www.92be.com-新彩吧七乐彩| www.866249.com-福彩快三豹子多少钱| www.390982.com-有救济金的彩票| www.94287.com-比分500竞彩网| www.102514.com-七乐彩网址-| www.880328.com-包头福彩-| www.412728.com-体彩足球单场停售| www.hi72.com-快三共计多少号码| www.7558.cc-刘雪龙彩票案| www.161872.com-今日头条送彩票| www.025954.com-3号彩-| www.636205.com-彩虹6号无人机视频| www.732383.com-cc彩球网登陆网址| www.812115.com-福利彩票3d吧| www.895689.com-多盈彩票网免费参考| www.975640.com-彩礼看出人品| www.ox07.com-上海福彩开奖查询| www.8jt.cc-真认彩票-| www.9397.online彩票客服是做什么的| www.29740.com-广西彩票网app| www.74265.com-彩虹旗为什么禁止| www.347722.com-福利彩票数字彩| www.417898.com-快三投资多少钱| www.145399.com-竞彩足球分析网站| www.861569.com-qq彩票在哪里兑奖| www.635668.com-hao500彩票网| www.5pk.com-一分快三彩票规律| www.62sg.com-福彩3d精华精衣3| www.98ed.com-盛彩彩票多久了| www.4429.cc-上海天天彩选三| www.9980.top-福彩3d彩吧图今天| www.1407.cc-大赢家彩票网正规吗| www.100908.com-如何在微信上买彩票| www.151307.com-多乐彩票平台| www.qq90.com-福利彩票种类| www.613033.com-澳门十二福利彩下载| www.669338.com-彩票运势-| www.722548.com-599彩票官网上| www.779950.com-查看彩票开奖结果| www.845922.com-重庆彩票案-| www.916416.com-3d彩票中奖规则| www.969454.com-官方幸运彩票网| 500彩票网www.97655p.com| www.299340.com-玩彩是什么意思| www.364009.com-刚力彩芽下海了吗| www.468761.com-天津彩票站转让| www.533499.com-彩票选哪个数字| www.586026.com-彩娃app苹果| www.636696.com-pc彩票下载-| www.687258.com-彩圣网免费资| www.766694.com-网上买黑彩犯法吗| www.819781.com-射手座买彩票什么号| www.875614.com-彩易3d藏机诗| www.939721.com-彩票代玩群-| www.991535.com-彩票输了怎么办| www.cq46.com-大发彩骗局-| www.vy62.com-福彩快3图片| www.6gt.com-彩票大乐透奖金分配| www.464680.com-彩票的规则-| www.yl71.com-彩票计划gcbcc| www.1314.date-三国精彩打斗片段| www.29929.cc-亿彩票老板是谁|