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.13rg.com-河南彩票大奖谢俊峰| www.2273.pw-老重庆时彩时彩| www.9823.pw-体彩开奖排列三| www.871170.com-天际彩票是不是骗局| www.975272.com-汇彩网是大平台吗| www.dt8.cc-快三反倍投-| www.77179.com-七星彩概率分析| www.862313.com-彩票程序的原理| www.947824.com-竞猜彩票app| www.dr45.com-快彩11选五助手| www.01si.com-3d字谜解释新彩网| www.0752.site-怎样玩五分彩| www.788768.com-福彩三天计划的| www.e53.net-七乐彩综合走势图| www.93ev.com-彩色相机的原理| www.59221.cc-福彩三d计算方法| www.061187.com-新浪体彩-| www.366891.com-雏菊彩铅画浅紫| www.773958.com-天天彩票qq交流群| www.884519.com-鳄鱼彩票手机版| www.985945.com-时时彩开售时间| www.44345.com-淘宝上可以买彩票吗| www.738468.com-关于彩票的朋友圈| www.833333.com-福利彩票自选怎么买| www.903976.com-彩票合买是什么意思| www.970651.com-彩票高手带计划| www.cai4677.com快三怎么玩才能赢| www.546132.com-福利彩票换纸教程| www.670253.com-哪种彩票最可信| www.809355.com-好彩客下载网址| www.919793.com-亚洲彩票十大平台| 七星彩票www.44qxc.com| www.080757.com-彩票8彩票-| www.633987.com-深圳七彩珠心算怎样| www.gi33.com-彩票走势图3d| www.420142.com-移动话费购彩票| www.385126.com-入侵彩票平台| www.932662.com-彩钢围挡生产厂| www.bj19.com-nba体彩-| www.w96.org-qq群里面玩快三| www.890760.com-至尊争霸彩票a| www.582128.com-中彩在线怎么样| www.961874.com-福彩3d预测新彩网| www.jp18.com-四季彩平台靠谱吗| www.88sk.com-985彩票代理商| www.4871.cc-977幸运彩票| www.19168.cc-广西福利彩票app| www.93218.com-快三试机号今天是| www.057063.com-七乐彩历史出球顺序| www.130414.com-杨艺教学快三| www.pn72.com-快三推荐号甘肃| www.52ub.com-49gcc特彩-| www.w59.xyz-好彩频道往期直播| www.672122.com-三d风云彩票a版| www.958432.com-大发鸿运彩票| www.ic18.cc-9118彩票网下载| www.18qk.com-鲁豫讲彩票视频| www.1252.vip-顶尖彩票平台| www.180533.com-uu快三骗局-| 彩之家www.13czj.com| www.20qd.com-3月5号体彩七星彩| www.2288.cn-消费送彩票犯法吗| www.7859.loan-胜负彩窍门-| www.70810.com-大众彩票送22元| www.099568.com-979彩票-| www.3513.cm-能赢钱的彩票网站| www.762738.com-2019,7星彩| www.183725.com-福彩五分快三走势图| www.912472.com-河南福彩网勇士争先| www.980366.com-中了彩票要保密| www.96752.com-体育竞彩资讯| www.002385.com-吉林快三合之图| www.361258.com-彩泥图案-| www.474789.com-风凰彩票app| www.44272.com-777彩票官方网站| www.983863.com-福州彩票兑奖中心| www.412358.com-彩钢板尺寸规格表| www.ry77.com-49彩票手机版| www.99239.cc-连中彩彩票app| www.094706.com-118彩票外挂| www.208587.com-广西福利彩票| www.745888.cc-大彩网是真的吗| www.313965.com-3d天天彩就业报| www.58829.cc-福彩快三寻宝图| www.353401.com-京彩集团有限公司| www.45339.com-第一彩票官网| www.cp7888.com-快三复式投注方法| www.ww87.com-七星彩开奖日期时间| www.155453.com-大发分分彩稳赚技巧| www.259923.com-京东彩票是真的吗| www.948296.com-民政局福彩中心| 万历彩票www.77114s.com| www.978932.com-500彩票投注网| www.517284.com-今日福彩预测图| www.318237.com-幼儿园玩彩虹伞音乐| www.423904.com-彩77手机登陆| www.542860.cc-梦想彩票网可靠吗| www.648033.com-中国福彩闯关| www.757245.com-彩色沥青混凝土报价| www.820322.com-足彩概率-| www.922695.com-彩票点-| www.986245.com-彩神500官网| www.ha5.com-玩彩胆神-| www.vg95.com-迅盈彩票能提现吗| www.31da.com-澳门全天彩是真的吗| www.506733.com-福彩113期开奖| www.85cf.com-彩93正规吗-| www.638794.com-体育彩票竞彩上海| www.734833.com-新手如何玩彩票| www.850601.com-快三杀号的计算器| www.956175.com-赢钱彩平台-| www.cai5234.com安徽快三结果图| www.636205.com-彩虹6号无人机视频| www.881319.com-浙江快乐彩胆拖玩法| www.82695.com-陆慧明今天竞彩推荐| www.539140.com-567彩票app下| www.496725.com-买彩票用哪个app| www.777576.com-全球彩平台下载| www.858839.com-彩29是黑平台吗| www.575198.com-外国彩票开奖视频| www.635891.com-七星彩虚拟摇号机| www.32618.com-全民汇彩票是否合法| www.851414.com-彩客网足彩预测| www.34835.com-辽宁快三彩票怎么玩| www.0945.vip-福彩3d结果-| www.263706.com-彩票开奖号码走势图| www.706641.com-时时彩论坛之家| www.te58.com-江西彩票时时彩| www.dk33.com-体彩7星彩开奖规则| www.380873.com-彩票彩金是什么| www.773023.com-比较准的彩票预测| www.875466.com-青蛙彩开奖现场| www.cp968.com-福建快三专家推荐号| www.238822.com-陌陌男彩票托| www.315916.com-七天彩下载网址| www.368600.com-福彩3d晚秋字谜| www.652167.com-体彩七位数开奖日期| www.788621.com-美国昨天彩票出奖号| www.852205.com-095彩票软件| www.898900.com-一分钟快三怎么赚钱| www.951364.com-守信彩票赚钱可靠吗| www.999308.com-福彩詹天佑预测分析| www.bv33.com-查体彩福彩开奖结果| www.wj57.com-长春快三52期开奖| www.6lo.com-高频彩逻辑-| www.689.live-足彩总进球数规则| www.nt48.com-彩票中奖符-| www.505.in-彩经网走势大全| www.5234.pw-博彩派彩是什么意思| www.00291.com-重庆十选五彩票结果| www.625331.com-体彩有哪些即开彩票| www.708218.com-zy55状元彩票| www.789161.com-彩妆店装修图| www.863977.com-今日体彩开奖信息| www.920625.com-幸运五快三-| www.973428.com-彩虹宝宝第一集| 500万彩票www.96386m.com| www.eq73.com-福彩双色球玩法规则| www.374198.com-体育彩票大奖时间| www.467097.com-a23彩票网app| www.5984.org-招竞彩分析师招聘| www.21369.cc-网上带领买彩票| www.78155.cc-华夏彩票大发快三| www.079985.com-彩票如何交税|