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.07387.com-时时彩2期必中计划| www.155809.com-好彩堂必中一肖| www.99646.com-时时彩组六8码漏洞| www.94832.com-广西体育彩票领奖| www.09746.com-专业玩彩预测| www.462879.com-p3体彩今日开奖| www.585673.com-天天买彩票腾讯| www.662382.com-七星彩几点停止销售| www.807857.com-体彩任选九中奖规则| www.891695.com-有微信彩票合买群吗| www.963649.com-vr彩票平台官网| www.cai9455.com兰州快三开奖号| www.mt25.com-彩票159官方版| www.72ew.com-e球彩三场全包| www.037866.com-安徽快三和值一定牛| www.131785.com-山西忻州彩礼及陪嫁| www.220548.com-优信彩票大发快三| www.365409.com-广东体彩网点扫码| www.53522.cc-彩虹7号电池是什么| www.018833.com-青蛙过河福彩中奖图| www.160021.com-广东体彩快中彩玩法| www.853991.com-彩票103安卓版| www.942859.com-易众彩店app| www.995705.com-北京单场是什么彩票| www.aa19.com-快三开奖结果河北着| www.471477.com-竞彩管方欧赔| www.595988.com-时时彩购买技巧| www.552205.com-开机号近十期利彩| www.152080.com-腾讯分分彩挂机平台| www.460243.com-贵宾室cp彩票| www.zd53.com-e球彩奖金表| www.016218.com-我看湖北快三全天| www.680906.com-七星彩是真的吗| www.790200.com-福彩500期走势图| www.870685.com-刚力彩芽av-| www.953201.com-体彩排列五奖号码| 彩客吧www.11ckb.com| www.090678.com-体彩6-| www.303732.com-虎扑足彩讨论区| www.386825.com-盛彩注册-| www.541792.com-乐彩网排五预测| www.435899.com-金利彩票手机版下载| www.546855.com-彩票卡时间漏洞软件| www.73837.cc-免费的彩票平台源码| www.104818.com-360足彩比分| www.473049.com-精英网彩票-| www.557879.com-亲子游戏彩虹伞视频| www.620935.com-彩票宝典官方网| www.689905.com-95彩票网页-| www.781048.com-必发彩票手机导航| www.888892.com-快三怎样砍龙| www.957138.com-红牛彩票计划| www.jt54.com-新3d彩票骗局| www.04hf.com-人人竞彩足球竞彩网| www.1361.net-蝙蝠侠水彩抽象画| www.8868.cn-足彩八串一中奖概率| www.31894.com-今晚足球足彩直播| www.211131.com-安徽省快三遗漏号码| www.333717.com-体彩排列3中奖说明| www.1366.hk-28彩官网-| www.36125.cc-买秒速时时彩的技巧| www.93278.cc-江苏快三是干嘛的| www.080168.com-马来西亚生肖彩图| www.518779.com-旺彩11选5预测| www.670715.com-福彩幸运农场追号| www.772316.com-时时彩票助手手机版| www.860931.com-河南省彩票发行中心| www.939126.com-彩票如何平刷| www.995122.com-福彩主任被抓| www.su56.com-9彩彩票平台| www.40gy.com-七星彩奇偶取法| www.89396.com-赢彩门户185开奖| www.6884.cc-网上购彩官方网站| www.953940.com-快三追号打法| www.nq03.com-福彩双色球自选号| www.937133.com-乐福网彩票正规吗| www.ih16.com-深圳快乐彩视频| www.050061.com-玩黑彩坐庄能挣钱吗| www.689523.com-6118彩票注册| www.789251.com-山西足彩5808| www.863272.com-新浪体彩数字彩票| www.925413.com-快三跨度计算公式| www.987230.com-天天中彩票关停| www.it59.com-竞彩比例-| www.949401.com-11选五大彩鲸| www.556608.com-中国体彩加盟多少钱| www.623456.cc-3d福彩论坛杀尾| www.680428.com-ok彩票是正规的吗| www.761508.com-搜神传好彩妹配音| www.821849.com-乐彩网可以买彩票吗| www.2141.net-福彩三地今天黑圣手| www.336662.com-利盈彩票-| www.414908.com-七彩影城群力店影讯| www.512953.com-彩票直通车预测| www.588094.com-福彩7乐彩玩法| www.672605.com-三d彩票过滤器| www.750275.com-全民彩票可以玩吗| www.830553.com-上海彩票店电话号码| www.910716.com-中国足彩网正规吗| www.976140.com-信阳结婚彩礼多少| www.eb70.com-旧版彩神争争霸| www.29qn.com-体彩中四个红球| www.723.bid-竞彩足球今晚开奖吗| www.546596.com-澳客彩票提交彩店| www.155146.com-送彩金棋牌游戏| www.771505.com-美团有彩票吗| www.840289.com-足彩赔率大师破解版| www.897499.com-广东福利彩票玩法| www.966770.com-彩票走努图首页| 500彩票www.175902.com| www.902803.com-k彩彩民中奖福地| www.967232.com-体彩排列五选号法| 500彩票www.50052a.com| www.739496.com-头条彩票真实吗| www.830043.com-重庆时彩玩法| www.898115.com-彩票店足彩怎么买| www.964630.com-足彩14场最新分析| 福彩网www.60007x.com| www.541862.com-亚洲分分彩是什么| www.637021.com-彩色电量美化包| www.7567.loan-东方亮彩副总离职| www.94364.com-数字彩票体育彩票| www.075707.com-彩6彩票手机版下载| www.157567.com-竞彩足球信息| www.389411.com-做福利彩票站赚钱吗| www.495.cm-快三这期能出什么号| www.03cu.com-彩票最大弃奖| www.151.cx-张惠妹彩虹mv| www.5695.cc-凤凰彩票可信度高吗| www.936093.com-速8彩票真假| www.996783.com-快乐彩几点开始| www.654535.com-大彩彩票网-| www.790699.com-大乐大乐透彩吧助手| www.887926.com-彩票代理如何推广| www.ej.com-快三彩票规则| www.3023.vip-足彩以分直播| www.959550.com-小站宝彩票在哪注册| 七乐彩票www.qilc9.com| www.0760.love-彩票api安装| www.3611.win-竞彩足球直播在哪看| www.356365.cc-彩票背后的数学| www.452744.com-有多少博彩是黑平台| www.533301.com-5d彩色打印机出租| www.654926.com-体育5分钟彩票足球| www.01623.com-人人竞彩官网| www.544696.com-粤淘彩票是黑组织吗| www.027164.com-彩票专营店-| www.090082.com-世界最大的彩票中奖| www.262803.com-100彩票-| www.331135.com-网上彩-| www.385182.com-吉祥彩登陆官网| www.544119.com-福彩3d怪字神贴| www.599181.com-易彩乐骗局-| www.657943.com-三分彩开奖走势图| www.714484.com-手机凤凰网彩票| www.774443.com-儿童简单水彩画| www.825100.com-体彩手游彩-| www.882287.com-高频彩种平台哪个好| www.932253.com-大丰彩票平台登陆| www.972273.com-8k彩票是什么意思| www.lo3.com-江苏快三时间调整| www.627848.com-有盈彩票官网| www.696799.com-中国足球客彩网| www.758873.com-彩票中奖者是真的吗|