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.785488.com-特区彩票七星彩| www.365499.com-落日风景彩铅画| www.67857.com-贵州快三最新预测| www.73325.cc-七星彩明月珰番外一| www.501269.com-海南淘彩-| www.53gm.com-河内5分彩平台计划| www.3869.in-星彩彩票网-| www.781522.com-下载66微彩-| www.941124.com-北京单场彩票推荐| www.000142.com-好彩快印-| www.121253.com-qq福彩计划群| www.419234.com-88彩-| www.505796.com-黑彩举报网站| www.576901.com-重庆腾讯彩-| www.820013.com-彩票如何跨省兑奖| www.948057.com-福彩专家-| www.cv25.com-河北快三之家| www.750463.com-北京体育彩票旗舰店| www.867317.com-体彩排列三迷图总汇| www.988118.com-副利彩票中将结果| www.rc33.com-极速时时彩必中规律| www.nq00.com-福彩选号器助手| www.674540.com-财政部和彩票| www.125896.com-易彩票下载安装| www.219300.com-345彩票-| www.27yn.com-全彩漫画母系怀孕| www.3456.website彩宝彩票cb116| www.181145.com-青海福彩快三| www.100803.com-体彩三天必出胆码| www.195458.com-河北快三预测推荐表| www.276521.com-彩票反水啥意思| www.449408.com-豪彩娱乐手机客户端| www.514378.com-七星彩大公鸡软件| www.500058.cc-博彩对赌套利靠谱吗| www.602.tv-喜乐彩票怎么玩法| www.s93.org-彩票中心福彩号码| www.60qh.com-天禄3d彩票-| www.324260.com-乐彩网靠谱么| www.439105.com-uu直播的彩票| www.556325.com-体彩刮刮乐试刮| www.643862.com-九万彩票可以提现嘛| www.771593.com-澳洲时时彩5| www.876878.com-彩票玩法规则软件| www.954507.com-彩宝彩票下载苹果| www.bf23.cc-百胜快3彩票app| www.1636.vip-时时彩四星缩水工具| www.369413.com-全民彩票916| www.207102.com-下载至尊彩app| www.526913.com-竟彩稳胆-| www.19091.com-福彩跨省能兑奖吗| www.200445.com-快3骰子彩票| www.711081.com-瑞彩纺织-| www.15wl.com-周口体彩-| www.6508.cm-长城彩票不能提现| www.42202.com-世界最大彩票平台| www.911118.com-彩票骗子-| www.cp170.com-大发彩票app| www.910817.com-香港赢彩网-| www.994931.com-好彩堂跑网-| www.dz97.com-彩票赚钱笨方法| www.wz97.cc-彩77官网下载| www.95570.com-体育彩票公益金比例| www.565775.com-河南蒂彩快三| www.688462.com-微信彩票竞彩夹娃娃| www.ek28.com-大发快三单双技巧| www.29363.cc-苹果系统买彩票软件| www.78830.cc-1233彩票下载| www.316632.com-爱盈彩app下载| www.3808.vip-快三出豹子规律预测| www.23998.com-大公鸡七星彩赚钱吗| www.79986.cc-刘军教玩江苏快三| www.756108.com-有没有皖快三| www.852128.com-佛教彩票咒-| www.918200.com-168私彩-| www.988542.com-57彩票app-| www.fw55.com-9彩-| www.298167.com-甘肃体彩中心| www.1ch.com-51彩票计划-| www.168044.com-福彩快三官方网站| www.253792.com-快三高手下载| www.392111.com-搜狐高频彩票| www.001479.com-足彩雪缘圆比分直播| www.160563.com-福彩3d进位和差| www.665490.com-七乐彩去哪里领奖| www.751394.com-彩票官方网站客户端| www.831679.com-85彩票是真的吗| www.901048.com-福彩排列五玩法说明| www.974837.com-南国彩票论-| 豪彩VIPwww.808793.com| www.885527.com-内蒙古体彩十一| www.958941.com-彩6苹果版-| 8号彩票www.81520s.com| www.ff62.com-彩票几天开一次| www.3688.win-彩色复印机租赁报价| www.oy21.com-不怕连挂的快三倍投| www.780667.com-体彩p3字谜汇总| www.865398.com-体彩第19032期| www.953503.com-一分快三输了30万| www.17210.cc-今彩今天开票| www.75995.cc-竞彩足球计划表| www.322396.com-易彩票是真的假的| www.84ao.com-乐彩网福彩谜| www.267782.com-北京快三早晨几点开| www.383718.com-好彩客app怎么样| www.502087.com-彩票平台制作教程| www.576816.com-好彩0567app| www.52iw.com-二鱼玩彩-| 大赢家彩票平台www.296233.com| www.703046.com-万家彩票网手机版| www.g15.me-海南市首届彩票大赛| 大赢家彩票平台www.897296.com| www.84645.com-吉林神采快三全能版| www.929103.com-七星彩复式中奖表| www.974868.com-海南经纪报体彩下载| 众乐彩票www.389744.com| www.776892.com-休闲快三分解李承红| www.982442.com-鸿彩网盈利模式| www.c8.cx-亨利68彩金-| www.22dc.com-竞彩足球低赔秘密| www.630328.com-彩票福彩15选5| www.699531.com-竞彩足球过关计器| www.770621.com-临沂七彩桥商务酒店| www.829850.com-百盈彩票可靠嘛| www.883859.com-博瑞有彩票网站吗| www.958613.com-贵阳市彩票中心地址| www.0080.net-彩票有趣的群名| www.0355.net-彩票百位出号码规律| www.20479.com-幸运快三开奖走势| www.32362.cc-彩色包装盒定做| www.66ss.com-风中彩莲爱你无悔| www.5577.vip-d8彩票可靠吗| www.52458.com-可以买足彩的app| www.7549.cn-四川体彩竞彩店审批| www.cp1.link-贵州福彩助手| www.8306.vip-排列五属于什么彩票| 鑫亿彩www.027079.com| www.395581.com-体彩星期六开什么奖| www.jh06.com-福利彩票怎么兑奖| www.543430.com-中华体彩彩报| www.qj3.cc-福建福彩快三开奖| www.637651.com-体彩字谜1011| www.19223.com-天天彩选四中奖号码| www.015732.com-手机怎样买七星彩| www.119534.com-发彩网能信吗| www.222342.com-易彩快3的技巧| www.108899.cc-彩票概率公式| www.216253.com-大马彩票平台| www.321893.com-下载人人彩票网| www.6782.top-金阳彩票乐娱平台| www.12343.com-手机自助购彩| www.664512.com-彩铅画儿童女孩图片| www.10uz.com-欢色球彩票技术分析| www.3656.cm-福彩3d今天开什么| www.874922.com-网易彩票网页版| www.eu84.com-分分中彩票-| www.wo14.com-人人中彩票小福仙| www.580815.com-体彩3历史开奖号码| www.677537.com-广东快三开奖查询| www.267934.com-58福彩app-| www.365846.com-彩铅画渐变教程图解| www.177636.com-北京快三计划网| www.040489.com-七星彩开奖视频结果| www.064229.com-双赢彩票网手机版| www.154477.com-彩票怎么买才赚钱|