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天

知道了
1分快三 www.it03.com-彩票预测推荐| www.1199.pw-香港好彩网免费资料| www.22br.com-黑龙江彩票之王| www.123574.com-天天乐彩输的荡产| www.971080.com-盈盈彩appios| www.190197.com-安徽安徽快三形态| www.423618.com-下载新浪足彩| www.750425.com-手机体育彩票靠谱吗| www.161331.com-体育彩票领奖地址| www.316587.com-乐彩双色球字谜专区| www.459532.com-苹果彩票在线登录| www.576211.com-吉林快三微信讨论群| 星际www.910xj.com| www.d09.com-彩票开奖了d| www.998.xyz-时时彩怎么玩不会输| www.133082.com-5厚彩钢板围挡价格| www.374953.com-五分⑥和彩计划资料| www.926276.com-上饶体彩征召网点| 网易彩票www.177949.com| www.wp.com-福彩3d领袖贴吧| www.6ie.com-逆袭分分彩智能做号| www.8885.mobi-竞彩八串中奖交税吗| www.52558.cc-好彩捕鱼游戏| www.010517.com-时彩怎么骗人| www.90mq.com-亚博博彩提现| www.08980.com-移动彩票-| www.015540.com-中信彩票下载安装| www.155554.com-时时彩自动投注机器| www.446998.com-七乐彩2010-| www.780175.com-福彩站背景墙| www.54163.com-五星彩票资料| www.060106.com-台湾三分彩开奖网站| www.06878.com-双彩球39-| www.107801.com-彩票软件破解| www.246902.com-彩票高手传授经验| www.397537.com-北京快3爱彩乐| www.694399.com-彩漂有什么用| www.863432.com-大乐透走势图大彩网| www.980409.com-想买体彩不知怎么买| www.js63.cc-彩神xapp软件| www.an40.com-贵州省体彩领奖地址| www.wt12.com-双色球彩票指南报| www.30dl.com-昨天体彩出什么号了| www.0951.cn-网易福利彩票| www.7330.in-小米彩虹电池怎么样| www.27799.com-1688彩票网站| www.442284.com-易购彩票提现失败| www.553786.com-竞彩比赛取消怎么算| www.687625.com-彩票返利是真的吗| www.839326.cc-江苏公益彩票| www.919812.com-新西兰彩票中奖号码| www.979948.com-体彩站吃票-| www.cp2859.com-福彩快三的打法| www.oq52.com-人类彩票中奖故事| www.6323.com-搜狐福彩体彩开奖| www.126461.com-智慧彩挂机骗局| www.0482.date-福彩3d游戏规则| www.017686.com-江苏快三和值预测| www.185991.com-极速时时彩开奖结果| www.278306.com-51亿彩票-| www.393933.com-好彩网福彩3d预测| www.570300.com-体彩第18154期| www.646071.com-彩票开奖提前知道| www.837216.com-彩钢-| www.920584.com-快三提高中奖率| 大赢家彩票平台www.081502.com| www.ri57.com-江苏快三可以作弊吗| www.071399.com-人人彩票网封了吗| www.km13.com-足彩资讯在哪| www.262163.com-猜快三作弊软件| www.816449.com-如何开一个私彩平台| www.889934.com-旭辉研彩软件下载| www.956819.com-七彩鱼最佳水温| 旺旺彩票www.522.cc| www.0340.xyz-内蒙快三客户端| www.lw40.com-青海西快三查询| www.0503.cc-体彩排五专家推荐| www.13458.com-足球竞彩软件下载| www.070220.com-今晚齐鲁彩票| www.261310.com-广东福彩快乐| www.438810.com-网上彩票平台加盟| www.6334.pw-彩票最近中奖事件| www.138006.com-彩61平台网址| www.414040.com-挂彩了-| www.065781.com-彩虹图片大全| www.572892.com-彩乐高手网-| www.82lq.com-江西体彩七星彩开奖| www.319028.com-福彩跑马幸运彩图片| www.505179.com-福利彩1加0有钱吗| www.633690.com-神彩通会员专用下载| www.bs67.com-快3彩票软件怎么做| www.14nd.com-体彩排列七星彩| www.5817.biz-体彩欢乐大乐透| www.119648.com-马会彩经一码书下载| www.262395.com-皇彩票app-| www.575780.com-体彩试机号3o期| www.719689.com-七星彩几位数中奖| www.738110.com-福彩app好运快三| www.971125.com-乐米彩票中奖不承认| 网购彩票www.cp7777b.com| www.933131.com-众信彩票平台合法吗| www.vr1.com-甘肃快三最新开奖| www.h27.net-乐彩排三论坛| www.314.la-购彩上1288-| www.7394.cc-彩票店铺转让| www.382092.com-智慧彩教程-| www.713058.com-吉林快三输赢| www.782520.com-福星中彩49-| www.5123.com-网上彩票加盟条件| www.90mp.com-miui系统彩蛋| www.225890.com-快乐彩12选5直播| www.9232.biz-乐彩网彩票安全吗| www.95787.com-福彩百名公益助学| www.222228.com-福利彩票十分钟开奖| www.752366.com-福彩3d杀码村| www.851134.com-竞彩足球比分析直播| www.949552.com-快三甘肃快三走势| 天朝彩票www.15239.cc| www.fp40.com-e球彩走势图进球数| www.cai990.cc-安徽快三开奖查询| www.qb62.com-下载新彩网-| www.873986.com-体育彩票卖提成多少| www.8321.biz-凤凰彩票网下载安装| www.53972.cc-彩票77755-| www.005680.com-八手巴购彩票可靠吗| www.134800.com-开彩票店的要求| www.232675.com-上海快三怎么玩稳赚| www.21dy.cc-体彩只能去店里买吗| www.9498.loan-新浪竞技足彩排名| www.84368.com-彩色水泥价格| www.101132.com-彩运8登录-| www.322195.com-123彩票平台网址| www.392342.com-彩票平台哪里找| www.546323.com-消彩豆安卓版下载| www.692865.com-体体彩彩大大乐乐| www.931233.com-体育彩票软件合法吗| www.rt4.cc-e球彩总进球数奖金| www.k12.gg-彩巴论坛-| www.366999.com-彩铅百合花图片| www.465866.com-福彩3d今天字谜图| www.556443.com-500go购彩-| www.618013.com-曾体彩中心曾志刚| www.700032.cc-五分时时彩规律| www.777127.com-百盛彩票靠谱不| www.964295.com-天天彩票试机号| www.cai3926.com内蒙快三玩法| www.c85.me-百变王牌百宝彩| www.79ln.com-彩乐园2官方网站| www.1106.top-突尼斯人彩票| www.039316.com-福彩走势图百度彩票| www.135428.com-彩票销售员招聘| www.218145.com-吉林快三网盘| www.301395.com-七乐彩跨度走势图| www.369616.com-查体彩-| www.445858.com-润金店彩金能回收吗| www.526659.com-时时彩追号规律| www.841602.com-彩妆盘淘宝代购| www.930724.com-大发快三豹子是什么| www.978084.com-得彩近十期开奖号| www.cp0417.com-福彩河北快三走势图| www.uc08.cc-彩计划下载安装| www.10bv.com-ee彩-| www.0316.cn-网上购彩网-| www.5400.com-体育彩票七星彩历史|