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.743685.com-竞彩网500论坛| www.673155.com-体育彩票开走势图| www.844589.com-福彩千亿案件| www.980610.com-快2彩票计算公式| www.px23.com-下载即送体验金彩票| www.4620.top-彩票真的凭运气吗| www.81616.com-网上彩票犯法嘛| www.104200.com-福彩23选5怎么玩| www.965586.com-竞彩5oo-| www.063958.com-时时彩国际娱乐官网| www.23pj.cc-高频彩票有人控制| www.5789.vip-双色球字谜图谜凤彩| www.70999.com-qq彩票安全可靠吗| www.fi96.com-大发快三团队计划网| www.28mo.com-福彩网手机版福彩| www.567947.com-下载利彩-| www.669007.com-棋牌彩票qq群| www.754789.com-乐彩客的app| www.825522.com-鸣彩传媒有限公司| www.892731.com-福彩过滤软件下载| www.960056.com-国外赌场送彩金网址| 凤凰彩票www.77802i.com| www.064633.com-最稳定的彩票平台| www.7954.vip-618彩票手机版| www.44855.cc-伍佰万彩票-| www.019790.com-营业中福彩店急转| www.005530.com-福建彩票网彩民论坛| www.55tl.com-318彩票下载安装| www.sh62.cc-大发快三系统破解版| www.61bo.com-3d彩字谜图谜总汇| www.0601.cc-易彩网怎么找不到了| www.6591.cc-彩生财论坛-| www.528044.com-网彩外挂-| www.594678.com-挂牌玄机彩图35期| www.682633.com-今日彩票软件合法吗| www.583166.com-高清彩色跑狗图今期| www.242438.com-湖北快三跨度走势| www.338531.com-武汉福利彩票| www.485360.com-网易彩票计划团队| www.575119.com-福彩快三算法| www.721384.com-彩票投注机键盘| www.846342.com-彩票做假案-| www.920378.com-快三定胆是什么意思| www.987480.com-玉林福彩中心在哪里| www.br92.com-信彩三分快三计划| www.217752.com-易彩彩名福地| www.363062.com-雨后小明看见了彩虹| www.225558.com-百合网彩票托| www.313523.com-网上快3彩票靠谱吗| www.579255.com-福彩三的藏机图| www.712231.com-湖北结婚彩礼多少钱| www.854416.com-新浪爱彩竞彩篮球| www.947561.com-重庆彩票大神采访| 500彩票www.338031.com| www.998941.com-头条彩票频道| www.ia86.com-安徽安徽快三一定牛| www.505741.com-玩黑彩快三-| www.594748.com-京东彩票入口在哪| www.931517.com-7星彩4位数-| 博亿彩票www.663by.com| www.2276.in-大乐透彩票中奖规律| www.400494.com-彩票0346下载| www.553230.com-竞彩模型怎么做| www.678788.com-刷彩网赚是怎么回事| www.865378.com-体彩手机在线大管家| www.926449.com-彩票是怎么买的| www.988695.com-全民中彩票官网网址| www.ag41.cc-福彩和体彩开奖结果| www.sr56.com-大乐透新浪彩票预测| www.91.com-彩虹的图片-| www.792.cn-体彩竞彩店转让| www.192402.com-甘肃快三彩票手机版| www.865923.com-分分彩是什么| www.085123.com-福彩三地振幅图| www.172115.com-彩票快三开奖| www.kj13.cc-瑞彩祥云官网app| www.019445.com-六会彩即时开彩下载| www.252903.com-好彩极速快三| www.271962.com-中原彩票是不是骗局| www.71dx.com-118彩票网导航| www.32213.com-彩钢瓦围墙价格| www.802210.com-彩友多下载安装| www.890382.com-关于全民彩票可靠吗| www.08jj.com-彩铅画动物视频教程| www.395.live-米来了彩票官网| www.5856.me-吉林时时彩爱彩乐| www.004863.com-33期福彩-| www.155673.com-微彩网投-| www.252253.com-微彩站官网-| www.89087.com-彩票牌照查询软件| www.cp906.com-百姓彩票骗局| www.71585.com-网易彩票官网登录| www.051898.com-体彩p3金码-| www.856809.com-哪个平台能玩彩票| www.915838.com-体育彩票加盟电话| www.973361.com-彩虹岛手游下载| 快3彩票www.785803.com| www.094008.com-中国福彩中心开机号| www.78.cn-用彩虹写一段话| www.553465.com-上海福彩网正宗吗| www.591987.com-分分彩刷流水思路| www.689881.com-云南福彩快乐十分遗| www.764899.com-彩票签到每天2元| www.884006.com-黑彩快三赚了几十万| www.964231.com-新手竞彩足球怎么买| www.172342.com-安微福利快三走势图| www.249022.com-中奖彩票软件| www.446992.com-摇一摇购七乐彩| www.626278.com-盈丰彩票快三| www.cm42.com-福彩3怎么玩儿| www.43fa.com-澳门彩票官网下载| www.69534.com-99彩是不是正规的| www.427299.com-中国福彩双色球投注| 博乐彩票www.35918r.com| www.994.cc-彩票有效期多少天| www.427234.com-旭彩墙衣-| www.pe79.com-河北快三推荐三同号| www.717018.com-天天中彩票上的大神| www.789677.cc-彩钢瓦围挡施工方案| www.860205.com-甘肃快三专家追号| www.922719.com-嘉兴福利彩票店转让| www.980195.com-淘宝怎样买彩票| www.cs7.com-分分快三技巧公式| www.ph77.com-彩票是骗局揭秘| www.k16.biz-体彩贵州11选五| www.30sj.com-彩虹玫瑰花语图片| www.309789.cc-福利彩票5分钟一次| www.276065.com-比大小的彩票有哪个| www.40mk.com-彩票购买大厅首页| www.495101.com-高频彩概率计算| www.639256.com-上海市福彩-| www.711252.com-买彩票诈骗案例| www.776669.cc-福利彩票有什么技巧| www.959642.com-三分时时彩开奖号码| www.377650.com-体彩店照片-| www.555515.cc-彩神高手论擅| www.929333.com-安徽体育彩票3d| 双彩网www.637012.com| www.oe72.com-赠送彩金qq群| www.121375.com-福利彩票双色开结果| www.6833.in-3d彩报全报-| www.67266.com-彩票九怎么骗| www.030951.com-永乐彩票下载| www.506814.com-如何在百度关注彩票| www.685499.com-双彩球开奖结果河南| www.820210.com-天价彩礼现象| www.1913.net-大象彩票网站| www.384912.com-9d彩票官方-| www.535897.com-福利彩票简介| www.233107.com-杨震足彩新浪| www.63bz.com-福利彩票代销者| www.80rd.com-时时彩任四-| www.se15.com-重庆时时彩龙虎和| www.71371.com-辽宁福彩双色球现场| www.727277.com-云彩厅买彩票| www.668485.com-国外彩票诈骗| www.38838.com-中彩网为何提不出款| www.4506.cc-体彩22期-| www.215229.com-江西体彩-| www.541844.com-万彩吧彩票c8cn| www.609404.com-福彩双色球133期| www.669366.com-发达彩票北京pk拾| www.085056.com-快乐彩票12选5| www.160701.com-一分快三赢钱技巧|