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.545813.com-福利彩票站申请书| www.659306.com-手机扫描彩票| www.734338.com-凤彩网字谜总汇| www.805403.com-七色彩开奖结果规则| www.878613.com-竞彩冷门大奖| www.948614.com-彩票公益金提取比例| www.999094.com-彩票汇-| www.bj12.com-快乐彩历史开奖号码| www.29162.cc-手机购彩哪个好| www.64hp.com-今天双色球维彩视频| www.238041.com-福利彩票下载安装| www.119932.com-福彩排三-| www.776447.com-快三拉花致青春| www.998739.com-明发彩票mfa08| www.kv01.com-上海福彩app| www.607516.com-人人彩票开奖| www.796825.com-青蛙彩票app下载| 众发彩票www.669zf.com| www.178545.com-内蒙快三出号走势图| www.163434.com-体彩大乐透资讯| www.259377.com-购买福彩软件哪个好| www.353629.com-亚洲博彩公司名称| www.996696.com-贵州体彩开奖结果| www.fa45.com-三d七星彩票图纸| www.xv46.com-9d彩票-| www.288269.com-江苏快三开的啥| www.wb.com-福彩论坛17500| www.352982.com-下载福利彩世界| www.832751.com-财富赢家七彩图| www.291623.com-下载彩票双色球| www.456629.com-彩易达集团-| www.577683.com-彩票平台搭建出租| www.668687.com-华人彩登录注册| www.762419.com-竞彩哪里买-| www.856654.com-愚人节整人彩票| www.930867.com-中信彩-| www.994728.com-正规好彩客下载| www.701007.com-北京福彩下载安装| www.509026.com-山东省云彩宝彩票| www.668252.com-现在农村彩礼多少钱| www.816625.com-吉林快三最近一百| www.105592.com-江苏体彩e球| www.93fr.com-彩色的图片-| www.428166.com-足彩任9缩水软件| www.657171.com-共赢福彩下载安装| www.785825.com-足球体彩网-| www.905895.com-快三开奖结果遗漏| 大赢家彩票平台www.976271.com| www.02945.com-一号彩票官网下载| www.n72.com-送彩票活动-| www.502369.com-快三豹子通-| www.69ki.com-网上玩彩票赚钱| www.245113.com-一分开易彩快三计划| www.388646.com-体彩互联网牌照| www.713331.com-实亿彩票官网| www.378654.com-彩票中奖情况app| www.555032.com-买彩票中五亿| www.250838.com-爱中彩票官网| www.cai708.com-快三中奖助手免费版| www.867703.com-七星彩廉江好彩体彩| E彩堂www.43818c.com| www.410444.com-金华体彩元旦放假吗| www.067237.com-假彩票打印系统| www.64bf.com-初始者买足彩技巧| www.0579.com-釉下彩餐具有毒吗| www.020344.com-富彩娱乐app| www.275793.com-哪个软件能玩快三| www.190065.com-江苏快三计划网址| www.267886.com-今日福彩丹东全图| www.339453.com-深圳彩票中心官网| www.434813.com-鸿鼎彩票软件下载| www.550613.com-大乐透头奖彩票图片| www.633386.com-销售彩票有哪些规定| www.699762.com-国家认证彩票app| www.774024.com-福乐彩28靠谱吗| www.836977.com-中原彩票是正规吗| www.902020.com-黑彩3d中奖规则| www.964496.com-浙江地方彩-| www.cp3767.com-北京快三怎么算中奖| www.vu22.com-体彩是什么-| www.47se.com-口袋彩票安卓版| www.nh71.com-彩先知-| www.865931.com-彩票123是真的吗| www.935082.com-平台彩票ios版| 虹彩集团www.hcjt1.com| www.dy34.com-5分快三是正规的吗| www.ve48.com-和彩-| www.03vr.com-彩票资料报刊大全| www.093893.com-新彩吧图迷字谜| www.177519.com-彩运8骗局-| www.255803.com-手机上如何投注彩票| www.329644.com-玩快三坑钱了| www.cp4086.com-江苏快三计划网| www.b36.bid-分分钟彩票软件下载| www.17el.com-七乐彩头奖-| www.220810.com-金牛彩票-| www.4129.com-138彩虹e台-| www.07224.com-福彩票3地走势图| www.87568.cc-银川体彩店转让| www.050252.com-qq上怎么买彩票| www.326389.cc-6合和彩今天开奖| www.12jx.com-江西快三吧-| www.76ov.com-菏泽福利彩票电话| www.1094.me-贺州体育彩票中心| www.6200.in-和红旗彩票类似的| www.386038.com-天津七星彩开奖| www.522894.com-福利彩票十五选五| www.033028.com-七乐彩中奖号码预测| www.444296.com-福彩3d绝杀和值| www.23315.cc-826彩票代理| www.208230.com-快三网上投注| www.273723.com-甘肃福利彩票快三| www.357908.com-a8彩站是正规的吗| www.449761.com-移动手机彩票投注| www.529168.com-小六壬测彩票号码| www.585092.com-新世界彩票网址| www.639578.com-怎么开好竞彩店| www.729885.com-选彩票软件-| www.217389.com-快彩在线网址| www.163921.com-竞彩篮球大小分预测| www.215650.com-青海快三今天推荐号| www.990067.com-福彩乐彩网-| www.jq48.com-分分彩害得我好惨| www.3825.com-排3跨度中彩网| www.41890.com-摇彩票软件下载| www.89782.com-福彩双色球缩水工具| www.034895.com-快三长龙最长几期| www.4698.top-彩漂怎么用-| www.406707.com-七星彩最近300期| www.02311.com-问题彩民案例| www.55739.com-哪个nba彩票正规| www.725938.com-彩票可以控制开奖吗| www.810622.com-国家体彩管理中心| www.554613.com-体育彩票入门知识| www.57zw.com-澳彩即时赔率| www.2116.org-彩票对打套利技巧| www.162332.com-中彩集团彭家| www.958479.com-七星彩开奖图片大全| www.mr0.com-快三高手app| www.000999.cc-广西快三改时间| www.062698.com-时时彩送彩金平台| www.167925.com-中国福彩快3下载| www.g67.shop-排列三彩经网预测| www.605252.com-网上骗买彩票行为| www.670933.com-排列三预测彩宝贝| www.733345.com-彩500vip-| www.802168.com-福利彩票销售站号| www.871152.com-七乐彩201-| www.970888.com-迷彩兔在线视频| www.gs8.com-五分快三怎样看走势| www.zt52.com-福彩2d-| www.44iw.com-彩46app-| www.333374.com-生日送彩票-| www.137194.com-八八彩票平台| www.108363.com-彩影相册-| www.16976.cc-大发手机购彩票| www.87084.com-宁波快乐彩12选5| www.079729.com-助赢彩票计算器| www.132093.com-彩礼两万-| www.078698.com-香港中彩王-| www.170889.com-极速快三规律| www.471883.com-uo国际彩票-| www.137504.com-体育彩票报刊| www.224508.com-江苏快三猜大小|