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天

知道了
58福彩 www.385598.com-天津彩票中心| www.399447.com-红牛彩票怎么下载| www.525510.com-博彩足球平台出租| www.103268.com-丰彩彩票登录| www.995480.com-好彩店彩票可靠吗| www.7at.com-宁波年会彩票| www.0440.xyz-亚洲5分彩走势图| www.715599.com-彩票代购实体店出票| www.810126.com-鸿运彩票号码注册| www.885952.com-内蒙古体育彩票黑彩| www.958850.com-彩票春节后开售时间| 手机购彩www.362588.com| www.000272.com-头条彩票官网| www.966758.com-宝马彩票网址| www.cai5551.com怎么看懂快三走势图| www.301266.com-旺彩预测社区| www.417920.com-彩漂剂的作用| www.ha95.com-彩票99下载-| www.2604.pw-湖南福彩论坛| www.591329.com-澳门彩票自拍| www.705231.com-体彩竞彩网比分直播| www.874486.com-彩吧图谜3d全图| www.992332.com-时时彩预测大小技巧| www.iu35.com-体育福彩开奖| www.w87.xyz-奔驰彩票老师微信| www.592107.com-荣誉彩票是真是假| www.727507.com-湖北福彩中奖| www.764.mobi-破解极速时时彩软件| www.291793.com-老彩民高手论谈| www.505192.com-天下彩蓝月网站| www.687612.com-陕西彩票app下载| www.769852.com-好彩店app官网| www.855177.com-uc彩票ios-| www.871922.com-牛彩票网址www| www.391093.com-艾彩97179-| www.588724.com-海南七星彩近期规律| www.454100.com-彩易一福彩3d| www.604865.com-鸿运时时彩计划软件| www.387155.com-978彩票官网下载| www.128080.com-彩虹风景头像| www.62sn.com-吉林快三快速查询| www.808768.com-福彩贴吧论坛交流| www.6156.biz-乐盈网彩票-| www.781045.com-下载江西快三助手| www.879585.com-网投彩票赚钱安全吗| www.979694.com-彩票导航天下特彩吧| www.iv3.cc-安徽快三预测号码| www.731843.com-8k彩票骗局-| www.832309.com-七彩网彩-| www.956093.com-玩彩票怎么控制贪欲| www.at71.com-五d彩票-| www.644342.com-足彩19019-| www.537498.com-彩色是几种颜色| www.363992.com-彩虹有哪几种颜色的| www.83378.cc-买了彩票紧张不敢看| www.082374.com-福彩25选5的解析| www.202026.com-49彩票下载-| www.312938.com-新彩彩票官网下载| www.759017.com-爱乐购彩票官网登录| www.827563.com-竞彩结果查询| www.897514.com-彩票搞笑-| www.959310.com-小站宝彩票怎么注册| 福利彩票www.99677k.com| www.jo55.com-彩金套利教程| www.397807.com-昨晚开什么七星彩奖| www.608698.com-经彩出行收费标准| www.786066.com-福彩大赢家论坛| www.741186.com-江苏快三数据| www.856997.com-快三中奖几率是多少| www.941978.com-给平台买彩票赚佣金| www.986728.com-手机版苹果彩票| www.cu93.com-凤凰彩票网可信吗| www.653306.com-彩票幸运之门官网| www.713921.com-福彩3的试机号| www.778035.com-乐彩福彩字谜专区| www.841563.com-福彩中心会改企业吗| www.899591.com-福利彩票刷流水| www.957417.com-足彩加官网下载| 福彩www.26878m.com| www.618497.com-足彩19056-| www.705545.com-辽宁体彩兑奖在哪| www.798358.com-怎么看彩票中奖没有| www.913129.com-彩贴吧-| www.07058.com-香港十分彩官网| www.55229.cc-福彩刮奖哪个机率大| www.795857.com-河内一分彩大小技巧| www.7kj.cc-广东体彩配送| www.304789.com-体彩十一选五助手| www.27599.com-彩票查询计算器| www.122161.com-新加坡彩票怎么买| www.871468.com-体彩藏机图今天| www.965823.com-快三最大遗漏是什么| www.177840.com-北京快三和值走图| www.rg55.cc-一分快三挂-| www.616168.com-609彩票是真的吗| www.887780.com-曝光彩票黑平台吧| www.788711.com-竞彩足球竞彩网首页| www.211018.com-网上彩票怎么买| www.316714.com-快三最大的漏洞广西| www.437704.com-256彩票官方版| www.540792.com-买彩网双色球那个好| www.658441.com-聚宝盆彩票网| www.810190.com-足球竞彩简单术语| www.887589.com-彩票中奖怎么兑奖| www.32fv.com-画彩虹桥图画大全| www.544318.com-p3怪字彩吧图| www.862570.com-七乐彩开奖时间几点| www.033948.com-七乐彩是什么时候啊| www.17zu.com-体彩大乐透历史同期| www.0822.xyz-欧冠体育彩票| www.gm81.com-濮阳市治理高价彩礼| www.53bl.com-彩票行家香港| www.077307.com-最好的彩色打印机| www.205581.com-江苏1快三-| www.316990.com-彩票上税多少| www.ve7.com-福利彩票3d谜语| www.r34.win-香港快三下什么软件| www.799576.com-舟山福利彩票快2| www.875926.com-梦见买彩票-| www.948648.com-好运快三是哪里的| 大赢家彩票网www.83033m.com| www.672672.com-七星彩1-| www.880288.com-和乐彩票-| www.cp7782.com-体彩大乐透走势| www.qw58.com-二分彩是假的| www.65918.com-湖北快三360彩票| www.154529.com-博雅彩票登录| www.275825.com-7星彩复式计算| www.387420.com-彩膜怎么做-| www.532038.com-彩库宝典1.0.2| www.961975.com-手机怎么下载体彩| www.729714.com-彩票恶搞生成器| www.845619.com-竞彩彩票停了| www.948106.com-四川福利彩票网| www.cai0499.com宁夏快三-| www.1216.biz-全民双色彩票| www.018223.com-773彩票app-| www.292351.com-3d今天的彩图| www.468833.com-手机迷彩-| www.st92.com-澳门彩8点3o| www.59352.com-天津时时彩彩经网| www.296209.com-快三技巧绝密| www.237228.com-合肥快三公交| www.347315.com-乐彩网彩票| www.437739.com-彩票神算王推荐号| www.597110.com-三分快三专家预测网| www.678954.com-甘肃快三豹子出法| www.758232.com-彩票站中奖提成| www.830983.com-宜昌快三中奖规则| www.908822.com-五分快三倍投计算器| www.y27.cc-南方福彩3d开机号| www.290.tv-2010年七星彩| www.009360.com-p代玩彩票-| www.168568.cc-江苏快3彩票官网| www.857419.com-彩票视频-| www.87324.com-玩彩票输了很多钱| www.41kj.com-体彩票11选5| www.701779.com-中国彩下载| www.792255.com-福利彩票高手预测| www.875473.com-高频彩可以玩吗| www.939535.com-彩神大发快三计划| 8号彩票www.60108y.com| www.788742.com-中国体育足彩竞彩网| www.77144.cc-竞彩任选九玩法|