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天

知道了
彩01彩票 www.648655.com-有中国过彩票的吗| www.995096.com-新浪彩票数据频道| www.ff40.com-快三真能赚钱吗| www.1rw.com-负债累累彩票救命| www.115849.com-三d乐彩网首页| www.059631.com-k彩真的能赚钱吗| www.018167.com-彩专家海滨在线计划| www.17py.com-体育彩票重启时间| www.969327.com-追号买彩票有希望吗| www.rk30.com-百盈彩票是什么| www.83qo.com-彩票中两位数| www.473076.com-迪士尼彩乐园手机版| www.590444.com-体彩316前后关系| www.803176.com-七五课堂彩票| www.911932.com-天天彩选四历史号码| www.999965.com-腾讯十分彩开奖软件| www.02kc.com-彩票快三安徽号码| www.95zj.com-买彩票地址不对| www.4745.vip-彩票造假领奖成功| www.10248.cc-乐米彩票官网3d推| www.840166.com-ig彩世界-| www.3029.pw-鸿运彩票在线软件| www.09995.cc-快乐彩票用户| www.306664.com-彩票站怎么买彩票| www.712023.com-全球第一盛兴彩票网| www.kw88.com-微信江苏快三二维码| www.3440.org-彩票站微信营销| 彩票5www.534658.com| www.530960.com-环彩网网页版登陆| www.664309.com-中国福彩30选7| www.355637.com-今天足彩比赛结果| www.475396.com-体育彩票可信吗| www.572361.com-彩票开奖计划软件| www.646434.com-职业买彩-| www.719169.com-赞美彩虹的经典诗句| www.843676.com-广西快三三同号遗| www.919067.com-3d福彩杀号-| www.996181.com-约彩彩票骗局揭秘| www.bm96.com-珍爱网彩票男| www.tc47.com-江西福彩中心地址| www.229021.com-我要买体彩-| www.198100.com-3d彩吧论坛首页| www.334044.com-体育彩票是怎么买的| www.zw41.com-上海福利彩票加盟| www.525539.com-重庆市福彩中心地址| www.573470.cc-福彩三dk线走势图| www.662603.com-旺彩双色球大乐透| www.925381.com-网上彩票平台提成| www.cai727.cc-官方快三破解软件| www.rr38.com-彩民之星周春勇| www.166492.com-快三平台哪个好| www.246930.com-六开彩白小姐中特网| www.331054.com-棋牌彩票怎么回事| www.967981.com-宁夏体育彩票| www.32002.com-彩票开奖时间几点| www.949736.com-网络彩票禁止| www.cy19.com-大发快三大小预测| www.zp03.com-时时彩后四杀条件稳| www.57yc.com-七星彩守号15年| www.4331.vip-领奖彩票网址| www.066739.com-苹果手机u9彩| www.71081.com-福彩正规购买平台| www.02725.com-体彩害了多少人| www.8jc.cc-爱彩靠谱吗-| www.95rw.com-叮叮彩票合法吗| www.1337.cn-体彩和福彩双色球| www.39619.cc-中彩在线买彩票| www.627.bid-生辰八字算彩票号码| www.103166.com-安装天天中彩双色球| www.007338.com-体育彩票店怎么申请| www.gr46.com-下一期好彩1预测| www.713929.com-用彩色的造句| www.337863.com-福彩今晚3d得出啥| www.531905.com-没有彩排过的戏| www.ij82.com-下载福利彩票软件| www.476878.com-福利彩票129期| www.671484.com-体育彩票试机号多少| www.603429.com-新e乐时时彩网站| www.725433.com-快3彩票网站彩网址| www.400148.com-南粤七星彩票论坛| www.50rp.com-易彩国际平台手机版| 8号彩票www.81520r.com| www.8908.cc-体彩竞彩6x22| www.947386.com-中国彩吧合法吗| www.620788.com-福彩三d字画谜| www.719228.com-怎样赞美彩虹| www.hw28.com-体育彩票管理中心| www.22ah.com-7168手机彩票| www.pu28.com-体彩排列三出奖号| www.55aw.com-三和彩-| www.764477.com-福彩744试机号| www.864815.com-手机上如何买福彩| www.930152.com-日本彩票玩法| www.986253.com-最好的彩票平台大全| www.fz0.com-快三屠龙什么意思| www.oo47.com-3d新彩吧图-| www.j57.net-何明今日七乐彩预测| www.28hv.com-星耀国际彩票正规吗| www.97eo.com-博又彩官方-| www.37319.cc-俄罗斯彩蛋多少钱| www.528230.com-怎样买体育彩票| www.dp41.com-英国时时彩开奖网站| www.c67.club-彩经网老旧版走势图| 大赢家彩票平台www.297790.com| www.k67.cn-博盈彩票网下载| www.558318.com-中国博彩业何时放开| www.183056.com-安徽福利快三一定牛| www.836277.com-顺丰彩票平台怎么样| 600万彩票www.312522.com| www.23790.com-福彩金码今天晚上| www.512957.com-好运快三有规律吗| www.105692.com-八亿彩官方下载| www.5520.biz-有什么好的彩票网| www.160890.com-赌一分快三输了6万| www.615629.com-做一个彩票软件下载| www.708933.com-赢发彩票邀请码谁有| www.780496.com-亚博阿里彩票官网| www.117653.com-福利彩票幸运快三| www.717203.com-彩铅画对孩子的好处| www.28282.com-常州体彩1800万| www.049547.com-彩票查询票-| 顶尖彩票www.234259.com| www.899652.com-绵阳福彩网点申请| 彩票驿站www.2350i.com| www.fm00.com-竞彩500网-| www.cs39.com-我爱彩票大发快3| www.495079.com-深圳博彩app开发| www.411216.com-彩票双色球中奖| www.5678.club-网络彩票重启新闻| www.50047.cc-99彩票平台送19| www.955380.com-凤凰彩票怎么样盈利| 500彩票www.50051j.com| www.143686.com-炫彩水晶泥-| www.081402.com-足彩大神跟单app| www.824770.com-彩名堂免费计划软件| www.895350.com-爱彩票快三软件下载| www.965541.com-5分快三豹子规律| 大赢家彩票网www.83033e.com| www.135806.com-竞彩让球比分直播| www.717.site-时时彩追号绝招| www.e57.online-乐和彩竞彩下载| www.241.biz-时时彩后二稳赚方案| www.4452.cc-头奖彩票进不去| www.9520.vip-盛宏彩票登录| www.36956.com-竞彩2窜1技巧| www.75638.com-彩票和值投注技巧| www.355700.com-竞彩中奖交税| www.995917.com-足彩电脑版-| www.bg01.com-五分彩被骗5000| www.254565.com-好彩60123平台| www.577566.com-七星彩今日推荐号码| www.3862.org-中国彩票研究所| www.062055.com-彩民之家一切为你| www.23722.com-红旗彩票注册| www.28ar.com-怎么注册福彩账号| www.508.tv-赚赚彩-| www.6749.com-095彩票邀请码| www.46584.com-大众彩票网首页| www.414888.com-竞彩串处理工具下载| www.00ge.cc-天空出现彩虹写句子| www.77sd.com-仙彩竞猜app| www.1759.cn-体彩最快开奖结果| www.7169.com-七彩假期靠谱吗| www.12336.com-国际彩票网站|