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.577123.com-快三机选带星| www.518187.com-牛彩票网主页| www.565058.com-福来客彩票-| www.1258.in-时时彩快-| www.3810.cm-体育彩票足球竞猜| www.12010.cc-微信口袋彩票店| www.002373.com-苏州体彩店转让| www.088080.com-亿彩网址登陆| www.01468.com-分分彩刷返点万能号| www.703769.com-竞彩足球跟单风险| www.855708.com-国内奖金最高的彩票| www.950341.com-福彩海哥双胆| 500彩票www.394277.com| www.713929.com-用彩色的造句| www.7437.la-福彩对社会承诺| www.329623.com-速赢彩一分快三计划| www.413717.com-精彩分享-| www.953846.com-牛牛彩票合法吗| QQ彩票www.89894b.com| www.329513.com-118彩票手机版| www.438885.com-d8彩票软件下载| www.443228.com-网易彩票是真的么| www.635391.com-彩票中奖扣税| www.930043.com-中国福利彩票结果| www.00034.com-爱投彩票怎么样提现| www.115069.com-讧苏福彩-| www.144659.com-广西双彩最新开奖号| www.54zv.com-时时采彩赔率表| www.579.cn-分分彩怎么看大小| www.43ig.com-澳门银河彩票app| www.815548.com-福彩3d和差-| www.111422.com-希关彩中文在线| www.808122.com-网络时时彩赌博举报| www.fk85.com-免费彩票全天计划| www.096112.com-众彩网怎么进不去| www.439266.com-每天一彩的专栏| www.218068.com-免费注册送彩金彩票| www.007.black-保利鸣彩艺术可信度| www.614477.com-打彩什么意思| www.92734.com-福彩电子投注单| www.403930.com-彩陶传奇-| www.293339.com-幸运快3彩票计划| www.62928.com-和彩宝彩票合法吗| www.568476.com-体彩排三断组专家| www.035139.com-倍率高的彩票平台| www.150324.com-彩票818正规吗| www.238230.com-快三怎么推算和值| www.315325.com-七彩阳光教育集团| www.385479.com-天津彩票5000万| www.07wg.com-彩铅鲜红配色| www.85fp.com-飞彩网是什么平台| www.1747.org-福利彩票中奖情况| www.7569.com-新浪爱彩足彩| www.4847.xyz-做梦刮彩票中奖| www.13280.com-竞彩篮球投注比例| www.613859.com-平安彩票首页| www.713342.com-福彩3d有没有造假| www.826582.com-体彩排列三谜语| www.917502.com-新粤彩网址-| 天下彩www.431056.com| www.3705.org-福彩3d全年开奖号| www.779560.com-福建福彩快3开奖号| www.g38.com-七星彩彩宝贝预测| www.332976.com-彩票3b的玩法| www.2gp.com-买彩票忌讳-| www.cp409.com-江苏快三平台投注| www.903926.com-现金彩票系统出租| www.584321.com-沉迷彩票人的心里| www.720234.com-彩票带单套路| www.31891.com-河北福利彩票7位数| www.049147.com-河北福彩排列7开奖| www.978368.com-彩票网址app大全| www.8121.cc-彩票网站会泄露| www.220537.com-分分中彩票手机版| www.301305.com-七星彩0到9排列| www.883489.com-皇爵彩票娱乐| www.969791.com-浙江福彩网2| www.cp464.com-福彩快3合肥| www.3719.com-体彩排列3图谜| www.594199.com-优乐彩合法吗| www.698441.com-嘉兴福利彩票官网| www.875393.com-神州彩票app登录| www.994300.com-福利彩票的几种买法| www.hc39.com-福彩幸运快三下载| www.106964.com-福彩3d规则说明| www.172351.com-福彩快三江西开奖| www.539913.com-彩票店出票的软件| www.627350.com-利澳彩票平台登陆页| www.596136.com-有密彩票计划下载| www.715488.com-足球竞彩彩票下载| www.800052.cc-11选5购彩窍门| www.878191.com-体彩排列三中奖| www.948120.com-南昌福彩兑奖地址| 大赢家彩票平台www.312660.com| www.555776.com-云南11选5爱乐彩| www.633332.com-篮彩单场-| www.711739.com-五分彩彩票计划网| www.789497.com-中国竞彩网推荐| www.862770.com-卖私彩怎么判刑| www.939269.com-足彩开奖直播| 凤凰彩票www.3479t.com| www.ju82.com-彩虹颜色-| www.1207.org-彩票中奖5亿| www.010755.com-跑狗6491彩票| www.34mq.com-体彩昨晚开奖号码| www.826715.com-彩妹杀号-| www.915546.com-彩票选址-| www.975403.com-七星彩长期包三字现| www.dc4.com-三分快三在哪里玩| www.96sz.com-表演节目彩排的说说| www.336045.com-天津体彩11选五组| www.443552.com-七星彩七星彩选号器| www.576943.com-兰州彩票兑奖地址| www.635727.com-e信彩票-| www.97db.com-75秒时时彩计划群| www.673422.com-古建彩绘龙-| www.773051.com-彩坛至尊免费资料| www.871733.com-苏州彩票兑奖中心| www.940014.com-分分快三怎么算中奖| www.982715.com-彩票体验金-| www.ap05.com-福彩3d布衣图2| www.rl46.com-十分彩的江苏快三| www.657143.com-好彩网红姐3d预测| www.838696.com-盘球网竞彩篮球推荐| www.974728.com-中奖彩票新闻| www.cai7888.com极速快三稳赚| www.111667.cc-唐山中3亿彩票的人| www.353004.com-八八彩票网址是什么| www.526688.com-时时彩包胆怎么选号| www.60aj.com-玩时时彩输了怎么办| www.0179.org-重庆时时彩天天计划| www.30542.com-下载瑞彩祥云| www.684626.com-福彩3d中奖组选| www.958490.com-七星彩开奖结果表| www.232006.com-彩票手机版-| www.cai1228.com中彩网app靠谱吗| www.1301.wang-彩票491cc-| www.8367.biz-辣椒够力七星彩表| www.832187.com-七星彩摇奖是随机吗| www.942285.com-彩票兼职的联系方式| www.36779.cc-体彩跟双色球的区别| www.346320.com-大彩票赢家-| www.33180.com-福彩3d2006-| www.897433.com-体彩竞彩app| www.972520.com-简单彩铅画多肉| www.cai1088.com江苏快三是骗局吗| www.ig83.com-致富彩票是骗局吗| www.zn98.com-招彩票代玩的群| www.20ce.com-足彩19004-| www.896668.cc-派彩电子走势图快三| www.0033.tv-很好的彩票选择号码| www.508369.com-彩票怎么捡漏| www.655948.com-彩票开发违法吗| www.743415.com-懂彩宝开奖-| www.800944.com-3d彩报常跟版| www.866740.com-极速时时采彩走势图| www.220428.com-快三秒奶茶总部| www.726654.com-吉彩网-| www.34874.com-二手彩神uv喷绘机| www.202209.com-湖南体彩-| www.09637.com-海拔彩票下载安装| www.8fm.com-博众彩软件-| www.0909.pw-新疆体彩官方网站| www.210215.com-我要做吉林快三代理|