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天

知道了
亚洲28 www.323637.com-七乐彩全国各地销量| www.497937.com-深圳游戏机彩票纸| www.96382.com-福彩19014期| www.695584.com-竞彩足球360直播| www.779534.com-福彩3d跟号投注法| www.860934.com-体彩手机在线安卓版| www.947950.com-竞彩足球论坛| 彩客博www.8667k.com| www.hl71.com-uu快三真人计划| www.72543.com-快乐彩推荐群| www.131359.com-彩礼3万女方回多少| www.319293.com-彩票软件送彩金的| www.738922.com-宝马彩票-| www.930308.com-91人工彩票计划| 彩吧www.580896.com| www.zf98.com-高兴彩票平台靠谱吗| www.74nq.com-天天彩票就是大坑| www.1999.pro-12.cc彩票-| www.7777.loan-青岛福彩一等奖| www.27508.com-山东体彩论坛网| www.90925.com-好彩开奖1-| www.087260.com-彩田路彩福大厦| www.199158.com-福利彩票3d开奖| www.288751.com-熊猫时时彩-| www.376400.com-五分快三软件计划| www.509769.com-内蒙古体彩竞彩| www.605885.com-购彩之家网址| www.690932.com-彩53免费下载| www.781984.com-福彩3d绝对布衣版| www.874415.com-七t星彩开奖结果| www.b15.com-江西省福彩中心电话| www.55er.com-518正规彩票网站| www.cp519.com-快三开奖走试图| www.5yj.com-福建省体育彩票网| www.32950.com-全民彩票原始软件| www.91877.com-彩票中奖在哪里兑奖| www.285857.com-彩票做任务-| www.431333.com-葡京彩票网-| www.579834.com-51欢乐彩-| www.767010.com-20号快三开奖结果| www.jm21.com-大发时时彩破解方法| www.342266.com-谁有江苏快三群| www.485187.com-彩票系统供应商| www.567516.com-江苏彩票app下载| www.740818.com-3d蓝精灵彩报图b| www.660669.com-福建体彩最快直播室| www.1816.xyz-吉祥彩票有导师策划| www.b61.top-福彩助手买不了| www.605.net-绍兴市福利彩票| www.37675.cc-奥克彩票i-| www.ie91.com-微信买彩票可靠吗| www.8815.org-快三计划软件原理| www.086602.com-福利彩票怎么玩的| www.562772.com-医彩化妆品怎么样| www.737739.com-三d彩报第三版今天| www.893875.com-彩16手机安卓| www.ui74.com-福彩3d机选号码| www.088.site-七星彩宝贝图| www.n83.cc-体彩排5开奖号码| www.286.bid-什么是七星彩三字现| www.13806.cc-七乐彩走势图彩乐乐| www.95606.com-体彩公益金贡献| www.167060.com-三分快三人工计划| www.333743.com-微彩中奖能提现吗| www.525908.com-彩票中一亿收多少税| www.807152.com-双色球彩票折叠| www.vo84.com-甘肃快三规律破解| www.101464.com-竞彩足球购买平台| www.290170.com-大赢家彩票ios| www.511461.com-五洲福彩怎么赢| www.659940.com-顺盈彩票可靠嘛| www.796299.com-福利彩票今天拭机| www.926212.com-乐羸彩票-| www.10dh.com-彩生活物业投诉电话| www.2629.cm-98彩票王-| www.85666.cc-篮彩加时-| www.126245.com-快捷彩票网是真是假| www.299346.com-幸运分分彩-| www.482381.com-福彩抓管理-| www.610783.com-梦见猪买彩票| www.732955.com-苏州体彩网大乐透| www.1717.cn-开户彩金不限ip| www.68631.cc-德国彩票-| www.302550.com-彩票中奖号码公告| www.424369.com-彩票开奖公正吗| www.579124.com-福彩电话投注中奖| www.690112.com-今日足彩唯彩推荐| www.797300.com-八马彩app-| www.148944.com-中彩网电脑版| www.002124.com-中国彩票第一高| www.173470.com-快三广西一天多少期| www.916213.com-十大私彩排行| www.cp8785.com-快三微信群号| www.933802.com-网络博彩违法吗| www.255467.com-快三预测一定牛北京| www.536276.com-香港买的彩票中奖了| www.667785.com-彩票中奖37亿| www.814985.com-彩票与刑法赌博罪| 购彩堂www.336440.com| www.277681.com-魔方快3彩票| www.uj99.com-大赢家彩票不能提现| www.642.cm-杏彩注册登录| www.09277.cc-短信买彩票-| www.380782.com-好彩网双色球预测最| www.383848.com-三晋福彩网今曰开奖| www.020609.com-精彩十分奖金表| www.236727.com-105彩票网址| www.139480.com-网上赌博时时彩真相| www.17ot.com-彩票套现怎么算利息| www.01072.com-海南七星彩票| www.48xv.com-彩票站点怎么开| www.95596.com-爆炸头足彩微博| www.979453.com-中彩情报网永久书签| www.cp9556.com-中彩网可以买彩票吗| www.qx65.com-七星彩连线走势图| www.59hx.com-玩高频彩的死心吧| www.ec58.com-分分快三正规吗| 亿龍彩票www.1368q.cc| www.844465.com-o1彩票北京pk十| 500彩票www.163910.com| www.417499.com-彩虹5号电池南孚| www.04cp.com-福彩3d彩诗迷| www.192230.com-福利彩票快三| www.203159.com-彩票走势怎么看规律| www.339227.com-时时中彩票下| www.8hn.com-国外怎么破译彩票的| www.948169.com-中彩网3d开奖号码| www.hq72.com-派彩电子走势图软件| www.92271.com-福利彩票0304| www.254839.com-彩票软件哪个送彩金| www.610693.com-百宝彩双色球走势图| www.154786.com-足彩任九奖金最高| www.2782.top-福建体彩报码聊天室| www.8438.top-玲丽彩妆培训学校| www.185786.com-老时时彩开奖号码| www.166053.com-江苏快三开奖今天| www.075276.com-一定牛彩票下载官网| www.lb71.com-冀彩宝现在能用吗| www.965255.com-中宏彩票邀请码| www.zv91.com-国内合法竞彩平台| www.7558.cm-牛牛创天下彩票| www.596343.com-足彩返奖率怎么算| 天天彩票www.106596.com| www.92261.cc-易彩智能投注软件| www.1097.pw-竞彩5串1-| www.75.net-hk百彩网开奖包中| www.sy44.com-湖北快三投注计划| www.792891.com-支付宝不能换彩票了| www.76629.cc-广西新快三-| www.61140.com-金源彩票投注平台| www.643565.com-九彩拱北老人家相片| www.533870.com-七乐彩中奖有顺序吗| www.294848.com-体彩排列三最准断组| www.5494.top-彩虹岛水果破解版| www.852216.com-手游彩票平台哪个好| www.nt58.com-买体彩是赌博吗| www.907735.com-吉林市快三跨度表| www.770739.com-老快三遗漏表| www.820266.cc-彩票投注站如何赚钱| www.788563.com-福彩今天试机号| www.72fq.com-大彩鲸十一选五| www.9098.xyz-高盛欢迎您网上购彩| www.7212.cm-933彩票正规吗| www.49633.com-能买中超足彩的软件|