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.84334.com-今天福彩3d布衣图| www.140612.com-9928彩票下载| www.192068.com-一定牛彩票走势图| www.292953.com-河南体彩中心官网| www.377986.com-高价彩礼移风易俗| www.533636.com-体育彩票怎么开奖| www.626362.com-福彩3d玄机图解码| www.8565.vip-七星彩缩水过滤工具| www.4189.cc-七彩影院是骗局吗| www.8362.loan-霓虹焕彩-| www.61255.cc-彩99新版-| www.vx58.com-快三能赢吗-| www.3gb.com-小伙彩票过期| www.8139.com-福彩开奖时间3d| www.482017.com-下载亿彩网站| www.646.date-圣地彩是真的吗| www.666316.com-够力匕星彩票奖表| www.850106.com-足彩任选9-| www.949240.com-快三杀号软件下载| 新盈彩www.xinyc5.com| www.va78.com-甘肃快三遗漏360| www.6592.top-彩财网-| www.456354.com-福彩三地中奖信息| www.576297.com-3d快三的跨度表| www.678531.com-彩票不能网购了吗| www.793576.com-彩票8816合法吗| www.889071.com-彩站宝投注站| www.976722.com-潍坊彩礼2018| www.cg0.com-好彩一生肖走势图| www.423910.com-金山彩票奖多多| www.786789.com-彩票跟单兼职| www.737656.com-红旗彩票官网快三| www.860104.com-八亿彩-| 500彩票www.299850.com| www.08717.com-代理彩票反水| www.117385.com-篮彩预测推荐| www.170877.com-福彩快三如何玩| www.4ww.com-福利彩票怎么看走势| www.8666.cm-福彩双胆预测| www.59669.com-彩虹卡通画-| www.69ku.com-彩票输了一百多万元| www.793825.com-网络黑彩票-| www.874777.com-拉菲彩票手机版下载| www.969142.com-级彩票-| www.cp881.com-快三招代理-| www.45564.com-幸运飞艇是假彩票嘛| www.90942.com-彩票机选还是自选好| www.299055.com-彩票开奖查询公告吗| www.061065.com-好彩客真的能赚钱吗| www.071935.com-福彩三d开机号金码| www.35hf.com-酷浪七星彩版图| www.634437.com-建盏出彩骗局| www.349504.com-下载爱乐透彩票门户| www.i11.org-福利彩票图-| www.82ro.com-时时彩和的单双技巧| www.201541.com-体彩开奖视频app| www.297226.com-体彩5d走势图| www.383255.com-彩票条码在哪| www.502679.com-多彩投贴吧-| www.110289.com-欢乐十分钟福利彩票| www.666.wang-皇家科技时时彩| www.15656.com-彩铅画画教程图解| www.964031.com-描写彩虹的诗句| www.53362.cc-图片彩票-| www.635718.com-第三套七彩阳光教程| www.115846.com-澳客彩票客户端旧版| www.616899.com-澳门快三算法| www.681058.com-网上14彩-| www.764574.com-信博彩票是正规的吗| www.58374.cc-人人中彩票没了| www.79tw.com-福彩前区中三个| www.778082.com-zgg官方彩网站| www.910298.com-3d彩涂丹东全图| www.986034.com-彩票站提成-| www.gy88.cc-盈彩在线是赌博吗| www.y63.club-刮彩票怎么算中奖| www.739790.com-金龙彩票下载| www.351937.com-网上彩票是不是骗局| www.425346.com-中彩双色球媒体擂台| www.522448.com-我乐时时彩网| www.587848.com-足球彩票竞彩足彩| www.657481.com-聚福彩票网登录| www.839396.com-彩泥相框画-| www.cp358.com-6e彩票-| www.8573.com-亿彩下载苹果版| www.221963.com-百彩网开奖结果| www.i51.mobi-快三如何定胆| www.516225.com-易彩快3的玩法技巧| www.359863.com-中华彩票9149| www.760628.com-彩票最高奖金| www.858412.com-青海快三玩法说明| www.263472.com-网络彩票贴吧| www.395650.com-体彩星期日开什么奖| www.08007.cc-美国中彩票的人结局| www.035318.com-彩票电视软件| www.604606.com-新粤彩每期报纸彩图| www.63463.com-七星彩安然最新预测| www.386907.com-彩屏手机-| www.576647.com-福建体彩报码聊天室| www.669498.com-彩钢夹芯板岗亭| www.kv71.com-玩快三合法吗| www.23mp.com-四川省体育福利彩票| www.2799.cc-彩票打出来怎么注销| www.27434.com-中国足彩比分网| www.96078.com-兴华彩票骗局| www.85678.cc-手机看彩-| www.288380.com-安徽快三和值奖金| www.md76.com-江苏快三杀号定胆| www.214323.com-全民快三网页| www.901496.com-牛彩官网手机版下载| www.cai8966.com彩票的谜语-| www.331999.com-冠彩网-| www.86692.com-山西大清快三走势图| 彩82www.c2798.com| www.388.cc-安徽竞彩官网| www.307230.com-江西体彩多乐彩玩法| www.464158.com-彩票4十1多少钱| www.637016.com-彩虹6号多少钱游戏| www.739582.com-三分彩全天计划下载| www.026534.com-博彩彩票app| www.051926.com-彩票球app-| www.576412.com-福彩最多能打多少倍| www.203042.com-安徽快三预测群| www.380111.cc-澳客网体彩预测专家| www.577636.com-昨晚七星彩开奖结果| www.362613.com-彩虹周杰伦歌词简谱| www.701525.com-福利彩票官方网址| www.829589.com-第19008期体彩| www.987176.com-网络彩票投注员兼职| www.o51.com-数学高手买彩票| www.07535.com-500万彩票计划| www.021270.com-武汉体彩兑奖地址| www.312044.com-33彩票网站-| www.287829.com-江苏快三正规么| www.382389.com-手机全民彩票安全吗| www.501379.com-乐八8彩票时时彩| www.784998.com-天天红单彩票安全吗| www.896353.com-鸿彩快三下载| 尊彩www.083019.com| www.026.cc-彩票返奖率最高| www.4326.vip-鑫亿彩彩票合法吗| www.843775.com-足彩一注多少钱| www.61596.cc-中彩票的几率是多少| www.xb92.com-南国体彩4十1论坛| www.3387.net-大花猫彩报-| www.159065.com-福利彩票机选摇一摇| www.290117.com-海南彩票四个数字的| www.450083.com-彩票中一个亿的概率| www.561356.com-彩票追号软件下载| www.676745.com-民政部福彩中心主任| www.io76.com-中国福彩客户端闪退| www.873419.com-体育彩票七星彩下载| www.374302.com-体育彩票十一夺金| www.136041.com-彩票单双大小玩法| www.809213.com-体彩的中奖几率| www.36991.cc-2018竞彩普及日| www.g32.club-苹果彩票-| www.565579.com-不出本金代打彩票| www.994027.com-高频彩票网站送彩金| www.9683.in-彩一万官方网址| www.678367.com-3d牛彩涂迷总汇图| www.885763.com-乐8彩平台下载| www.cp8387.com-彩票查询快3| www.mz80.com-江西快三投注app|