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.1727.win-彩工网快三早知道| www.5083.top-购买世界杯足彩| www.hu40.com-河北彩票快三| www.639408.com-彩票店倒闭的多吗| www.04328.com-提现到微信的彩票| www.23292.com-腾讯五分彩龙虎计划| www.715973.com-彩票双色球下载安装| www.405342.com-彩库宝曲开码结果| www.75ky.com-三十六计赢足彩文库| www.53169.cc-快三昨日未出号码| www.054757.com-浙江省福彩网官方| www.74495.com-七乐彩二等奖三等奖| www.51eo.com-苏州彩票作假| www.31348.cc-安徽快三开玩法| www.659764.com-明发彩票安卓软件| www.837989.com-彩羽红葡萄酒怎么样| www.7920.vip-鸿运彩票咋样| www.052937.com-竞彩500网计算器| www.7473.pw-体彩从未开过的号码| www.751051.com-彩票巴巴是合法的吗| www.52856.cc-夭空彩票-| www.3118.pw-体彩专管员考试试题| www.248011.com-快三全自动开盘软件| www.147822.com-奥克足彩-| www.232144.com-江苏福彩快3开奖| www.321962.com-最准彩票预测软件| www.499954.com-微信充话费送彩票| www.94917.com-彩票系统维护要多久| www.068977.com-天天众彩app下载| www.21616.cc-重庆旧时时彩走势图| www.077303.com-大型彩色打印机价格| www.982930.com-每日首充送彩金彩票| www.cd46.com-买彩网-| www.8309.cm-正规的彩票投注网站| www.95kh.com-体育快开彩票中奖| www.087806.com-幸运快三谁被骗过| www.100727.com-海南休育七星彩开奖| www.173782.com-快三豹子出号规律| www.9274.cc-乐彩网提现不了| www.0798.date-网上怎么找足彩客户| www.9071.biz-七乐彩工具大全| www.871103.com-彩票投注计算器胆拖| www.964617.com-天下彩开奖在线直播| www.mh9.com-吉林省体彩中心电话| www.68972.cc-尊彩网能玩吗| www.19rv.com-稍后更多精彩内容| www.005835.com-好彩1今晚开什么| www.08588.com-318彩票网-| 鑫亿彩www.196903.com| www.xb99.cc-双彩论坛3d字迷| www.193156.com-福彩快三3开奖规律| www.88nv.com-盛世彩票黑过钱吗| www.878877.com-七星彩最近30期| www.477701.com-萍乡福彩示范店| www.582314.com-头奖彩票客服| www.690757.com-澳客网足球彩票比分| www.770211.com-黑彩代理如何拉人| www.852567.com-腾讯分分彩五星走势| www.961368.com-七乐彩奖金多少| www.ix.cc-彩票北京快三开奖| www.918807.com-易发博彩-| www.990594.com-南京彩票店转让| www.b06.com-什么是好彩票双色球| www.54xk.com-虹桥的彩票专栏| www.158602.com-亚搏彩票软件安装| www.433342.com-传彩票-| www.712564.com-盛兴彩票手机官网| www.869653.com-鸿发彩票网是黑网吗| www.qt80.com-富人怎样买彩票的| www.1yh.com-双色球定胆杀号凤彩| www.690869.com-竞彩足球比分新浪网| www.791117.com-幸运快三代玩兼职| www.866686.com-昨天出的福彩号码| www.935586.com-百赢快三是真的吗| 多乐彩票www.422727.com| www.660864.com-分分彩算法-| www.794565.com-微信云端国际彩票| www.816781.com-时时彩追热号的技巧| www.111866.com-558赢彩安全吗| www.508901.com-体彩排列三藏机图谜| www.427432.com-k彩5分快3-| www.599827.com-第一次买彩票就中了| www.71381.com-彩票数字买法| www.507696.com-怎么关注老猫彩快讯| www.m13.mobi-大发快三刷流水方法| www.507.cm-财富彩票app| www.5877.me-买彩票中奖概率最高| www.21479.com-5亿彩苹果版| www.13210.cc-今日竞彩分析| www.57527.cc-手机彩票代理怎么做| www.85180.com-代领彩票外地| www.038003.com-彩牛彩票app下载| www.176499.com-uu快三投注规律| www.011356.com-怎么玩快三能赢| www.867818.com-历史七星彩所有怪号| www.606876.com-时时彩定胆5码公式| www.34425.com-众购彩票网官方网| www.98757.com-代玩时时彩是真是假| www.086461.com-七乐彩胆拖中奖规律| www.187687.com-时时彩九码无挂公式| www.886513.com-购彩app靠谱么| www.lh23.com-卓易彩票app| www.271910.com-福彩快三有人控制吗| www.85441.com-彩票网首页121| www.2298.wang-重庆时彩稳定版| www.570890.com-美国七彩山鸡图片| www.567357.com-南京彩票大奖| 众乐彩票www.686244.com| www.01160.com-彩之网软件-| www.802377.com-吉林省中国福彩3d| www.885439.com-腾讯游戏彩票的骗局| 3G彩票www.c138.vip| www.341006.com-体彩大乐透欢迎语| www.547270.com-博发彩票高倍会中吗| www.404338.com-河南彩陶王酒价格| www.542410.com-怎么开福彩投注点| www.627055.com-广西快三500彩票| www.704533.com-海南七星彩私彩网投| www.884347.com-澳门十大博彩| www.995340.com-竞彩与北京单场比较| www.fy40.com-彩票幸运5分钟开奖| www.163576.com-聚财彩票官网| www.8612.biz-福彩快三公式| www.56172.com-掌中彩骗局-| www.760726.com-秒速时时彩总和计划| www.198385.com-筛子分分快三攻略| www.97880.com-时时时彩宝典| www.347988.com-天天彩票助手注册邀| www.pe47.com-福彩3d玩法详解| www.19rq.com-点击看更多精彩视频| www.789370.com-彩妆加盟店排行榜| www.618177.com-365彩票苹果下载| www.701609.com-买彩票被骗能追回么| www.784305.com-众购彩票网网址| www.877872.com-写的彩票类的小说| www.969478.com-彩票一期计划网站| www.zo32.com-彩吧彩报图-| www.26223.cc-描写彩虹的作文| www.68871.cc-买彩票选号的规则| www.131115.com-老版够力七星彩奖表| www.239776.com-王者彩票骗局揭露| www.2537.win-绿播与彩播的区别| www.362527.com-福彩3d万能二码表| www.78bh.com-博彩软件开发公司| www.878214.com-福彩排列三开奖号码| www.032.date-唐龙3d电子彩报| www.80139.com-河北体彩排列5| www.303969.com-中国福彩报-| www.nj17.com-竞彩足球360网| www.718251.com-彩库宝典现场开奖| www.811872.com-开奖公告千亿彩票| www.874591.com-山东彩票网-| www.6761.org-赢钱彩登录网站| www.217248.com-苹果福彩下载安装| www.312181.com-胜负彩app-| www.402708.com-七星彩第四杀号| www.962208.com-星彩网怎么不更新了| www.119054.com-01彩票是合法的吗| www.09400.com-鸿鼎彩票平台| www.57512.cc-下载江苏e球彩助手| www.018961.com-彩票缩水助手| www.313410.com-华夏彩票客户端下载| www.435035.com-pk彩票下载-| www.517247.com-时时彩官方网app|