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天

知道了
彩票123现在叫什么名字 www.84rm.com-仟彩摸吧电话| www.0626.live-福彩3d预测交流| www.796394.com-盈彩在线是什么| www.885340.com-神州彩app下载| www.966872.com-彩票哪里不能损坏| www.cp6718.com-快三推广合法吗| www.7279.wang-重庆时时彩冷号| www.70271.com-玩运彩朋友圈| www.654820.com-旺角彩皇免费资料| www.654437.com-体育彩票申请网址| www.9050.org-怎么买cba彩票| www.640038.com-新时时彩开奖走势| www.70hi.com-贵港市福彩中心| 118彩票www.62118f.com| www.132461.com-开彩妆店怎么样| www.5795.com-玩彩票输了五千想死| www.004219.com-即是开彩-| www.118168.com-渐江体彩网下载| www.491812.com-彩票009骗局| www.639111.cc-开家体彩的要求| www.308982.com-新加坡乐和彩开奖记| www.656032.com-彩票纷争-| www.683114.com-爱彩乐开奖号码图表| www.3909.cc-网易快三缩水| www.349448.com-怎么做彩票走势图| www.453796.com-竞彩彩票官网多少| www.567170.com-彩大乐透走势图表| www.627500.com-彩票5000万网站| www.705537.com-福彩自助精灵可靠吗| www.406928.com-温州塘下体育彩票买| www.514789.com-湖南福彩电子报| www.587090.com-湖北快三必出豹子号| www.668941.com-美国乐透彩票怎么买| www.222019.com-彩票自动挂机| www.024952.com-甘肃快三预测神器| www.56007.com-124快三后面打| www.4737.com-彩票平台送58| www.85502.com-凤凰彩票平台注册| www.156016.com-福彩3地试机号口诀| www.160250.com-182彩票-| www.238889.com-分分彩怎么作弊| www.8847.cm-爱乐透彩票开奖公告| www.53851.cc-如何举报非法彩票| www.60me.com-福彩3b预测专家| www.q04.site-彩票3d怎么玩法| www.52ae.com-创意水彩画动物图片| www.910.in-临沂福彩兑奖中心| www.5251.live-彩票自动投注源码| www.01047.com-环彩触屏网址| www.h26.club-七星彩怎么兑奖规则| www.46mx.com-乐游彩票合法吗| www.857.pw-公益时报中华彩票网| www.4536.vip-七星彩036期| www.956431.com-甘肃快三遗漏图| www.cai5777.com5分快三走势图| www.kx52.com-大发快三有人赢钱吗| www.06lo.com-福彩33期开奖| www.397967.com-官方七星彩画规奖表| www.583932.com-人人中彩票管理员| www.296719.com-彩票k线怎么看| www.397802.com-赢彩彩票暂停销售| www.574630.com-老九乐购彩票真实吗| www.709653.com-时时彩可以赢钱吗| www.791532.com-彩票店铺图片大全| www.871009.com-内蒙古快三统计图表| www.954298.com-时时彩助手苹果| 华彩www.71399d.com| www.192224.com-好彩3中奖多少钱| www.004902.com-上期中奖彩票号码| www.929993.com-大玩家彩票快3| www.989852.com-三d太湖字谜多彩网| www.ds99.com-彩票软件ios| www.1396.win-66彩票-| www.72ve.com-足彩跟单陷阱| www.5081.pw-如何用手机买福彩| 大中华彩票www.2dzh.com| www.t11.com-七乐彩开机号| www.3333.net-时时彩后三走势| www.06473.com-非凡彩票主页| www.040815.com-快三和值选号法| www.339725.com-多彩贵州网地址| www.34435.com-本期七星彩期头尾| www.234748.com-体彩助手下载| www.209976.com-足彩网上投注不能买| www.307032.com-台湾5分彩开奖查询| www.389130.com-安徽彩票11选5| www.995046.com-易彩网兼职是真的吗| www.rs2.com-彩之家平台-| www.095296.com-单双彩票投注方式| www.163619.com-体彩容错怎么打| www.840876.com-360足球彩票比分| www.51099.cc-彩乐乐双色球遗漏| www.046577.com-生成彩票程序软件| www.898981.com-福彩快三注册送彩金| www.oo4.com-一定牛江苏快三预测| www.19vi.com-体彩彩票19078| www.841974.com-大有彩票娱乐注册| www.58105.com-迷彩唐哥-| www.271935.com-湖北福彩网快3| www.1qe.com-大发快三刷流水贴吧| www.97139.com-福彩3d规划图| www.7707.tv-黑龙江省时时彩开奖| www.414040.com-挂彩了-| www.622225.com-福彩乐透型开奖结果| www.219603.com-快三技巧大小单双| www.290453.com-3d彩经网杀号定胆| www.361182.com-十分快彩-| www.483639.com-天津福利彩票双色球| www.619176.com-淄博福彩招聘| www.226754.com-韩国彩票45选6| www.292022.com-江苏快三走势图手机| www.514158.com-官方亿彩是什么意思| www.363065.com-雨后彩虹是什么原理| www.26931.cc-中彩票的概率是多少| www.263193.com-什么网站可以买体彩| www.093805.com-体彩高频改革| www.081774.com-网上在哪买七星彩| www.318661.com-福利彩票3p走势图| www.321130.com-中彩网体育彩票排5| www.32631.cc-福彩3d新闻-| www.259388.com-彩票计算器复式| www.644959.com-彩宝网开奖查询| www.718839.com-彩虹是条虫-| www.06kb.com-33期福彩号码| www.0701.tv-足彩滚球让1球胜| www.47790.com-好彩妹是哪个电视剧| www.025386.com-七乐彩图-| www.53857.cc-手机可以买福彩吗| www.j96.org-马来福利乐和彩开奖| www.322388.com-乘风彩票-| www.01tc.com-3分时时彩下载| www.131.cm-彩虹的约定歌词寓意| www.cp4660.com-彩票开挂软件免费| www.109511.com-2044彩票下载| www.343605.com-随时赚彩票软件| 计划软件-创名彩票怎么样| www.84sk.com-飞彩网是干什么的| www.2028.cm-1068彩票快3| www.031220.com-芒果彩票是不是骗局| www.102231.com-全民彩票是真的吗| www.288511.com-彩票高手论坛网| www.185615.com-江苏快三是啥意思| www.62pq.com-彩票税多少-| www.000689.com-多彩网网址-| www.290017.com-福利彩票中奖怎么领| www.374544.com-福利彩票哪里领奖| www.767911.com-旺彩四肖中特图网站| www.885106.com-有玩同乐彩票的吗| www.974016.com-体彩中3亿-| www.ca82.com-彩票中奖神器下载| www.778025.com-欢乐十分彩正规吗| www.44265.com-全民中彩下载| www.eh92.com-彩经网蓝球杀号| www.590887.com-下载奔腾彩票软件| www.zl69.com-福彩17500字谜| www.57wm.com-契诃夫彩票人物分析| www.1855.live-华彩赢家传销方案| www.812602.com-彩票双色球走势预测| www.49896.com-有什么好的足彩软件| www.365235.cc-彩库宝典苹果手机| www.585.gg-时时彩经验心得交流| www.03367.com-彩票造假能仿造吗| www.937028.com-臺湾福星彩库图| www.15973.com-七乐彩的玩法|