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.01292.cc-吉利快三1分钟1期| www.828711.com-138彩票官方网| www.954989.com-黑客找彩票漏洞| www.m17.online-大发快三怎么玩和值| www.92yu.cc-时时彩群主判刑| www.1238.me-彩票什么算豹子| www.vc74.com-河南体彩481技巧| www.55tz.com-福利彩票106| www.032686.com-爱乐彩山东11选五| www.185142.com-福彩快三二十分钟| www.48nx.com-七星彩星彩网| www.830043.com-重庆时彩玩法| www.418417.com-苏州足球彩票店| www.704935.com-爱彩乐遗漏-| www.851685.com-时时彩遗漏冷热软件| www.953234.com-贵宾中彩-| www.ea34.com-分分快三下载链接| www.27137.com-彩票团队微信群| www.e79.top-彩票30选7-| www.0528.cc-福彩牛彩图迷| www.523326.com-时时彩下期出号规律| www.667798.cc-福利彩票的职责| www.826765.com-98彩票网黑钱| www.ne56.com-999金巴黎彩票| www.098873.com-ig彩票平台官方网| www.923451.com-彩票店吃票判几年| www.436855.com-湖南幸运赛车彩票网| www.129935.com-金七乐_四川体彩| www.8857.org-购买霍德华彩票专著| www.769101.com-3d彩票布衣天下图| www.318604.com-福彩3d开奖走势| www.391062.com-491cc彩票一让| www.mf66.com-恒大彩票提不了钱| www.40fa.com-带坐标的七星彩| www.7184.vip-彩宝品牌-| www.528550.com-彩神vl可靠吗| www.674687.com-英国官方彩票有哪些| www.092771.com-周口彩礼-| www.228595.com-新疆喜乐彩开奖公告| www.612524.com-彩票每日存送| www.574833.com-足彩十四场比分之5| www.150683.com-福彩黑彩网站| 大赢家彩票平台www.977389.com| www.rk87.com-梦想彩票app下载| www.45hj.com-彩虹台风-| www.235908.com-足彩波胆-| www.577239.com-体彩排列五综合图| www.094488.com-麦久彩票网3d预测| www.240944.com-彩吧下载-| www.09922.cc-鼎峰彩票-| www.31sq.com-彩票星期天几点开奖| www.564161.com-福利彩票机器人代理| www.8431.vip-乐彩网倒闭了| www.326530.com-寒若冰七星彩预测| www.52129.com-外国彩票开奖号码| www.141403.com-中彩网是官方网站吗| www.310770.com-491彩票资料| www.397384.com-信誉彩票网络平台| www.507953.com-久久彩票登录不上| www.595221.com-好彩赢天下报纸| www.668594.com-体育彩票中奖怎么看| www.750928.com-足球彩票18075| www.823493.com-彩吧论坛牛材网| www.887946.com-官方高频彩直播网| www.965891.com-最近福彩中奖的彩民| www.cai4444.com河南福彩快三预测| www.866810.com-2345彩票走势图| www.4639.biz-旺旺彩票可信吗| www.317596.com-职业彩民亏损| www.228780.com-好彩1预侧-| www.523146.com-75秒时时彩官网| www.39328.com-中国体育彩票靠谱吗| www.340136.com-登录九州彩票网站| www.957043.com-福利彩票2044期| www.013841.com-帮忙看彩票是否中奖| www.183157.com-幸运快三官网app| www.271593.com-快三合之规律| www.855786.com-彩票如何定胆| www.513751.com-彩钢觉围挡-| www.630332.com-福彩常根版-| www.745217.com-大赢家彩票138| www.861316.com-彩票历史开将结果| www.974180.com-快三秒胶水厂家| www.332019.com-吉林快三为啥会输| www.474737.com-发大财彩票娱乐网| www.580217.com-体彩排列五中奖秘诀| www.678981.com-最新彩票小诸葛| www.168.xyz-彩库宝曲手机版| www.994382.com-彩票生成器代码| www.wk6.cc-澳洲5分彩开奖结果| www.3766.top-玩家时代彩票平台| www.203638.com-内蒙古快三走势| www.310808.com-七星彩0到9的对数| www.606511.com-游元东路体育彩票店| www.715853.com-爱购彩票正规吗| www.29562.com-乐彩网彩票论坛| www.309964.com-亿网彩票开奖查询| www.789757.com-福彩3第八图谜| www.961570.com-彩票五行属于什么| 好运彩吧www.025727.com| www.ys27.com-湖北福彩官网| www.125254.com-七乐彩中奖概率最高| www.302988.com-江苏快三购买软件| www.376533.com-体彩18143期| www.463369.com-五百万彩票安卓版| www.534959.com-什么彩票6个数字| www.636362.com-彩虹糖小豆机圣诞| www.701113.com-做网上赌彩赚钱吗| www.771987.com-福利彩票5d开奖| www.838687.com-竞彩平手盘怎么分析| www.918510.com-重庆福彩中心地址| www.970889.com-梦见清晰的彩票号码| www.vp7.com-彩宝网骗局-| www.po68.com-3d快三走势图| www.s66.com-中国福彩试机号今晚| www.42lo.com-唯彩会历史版本| www.767.cm-内蒙古破解时时彩| www.4809.org-身边有没有彩票中奖| www.9559.com-风彩彩票下载安装| www.278076.com-国家福彩中心网站| www.223143.com-福彩3d软件下载| www.761943.com-彩票小鸡图迷| www.528777.com-体彩店布局图| www.675969.com-彩票结果查询公告| www.9ex.cc-关于彩票的说说| www.38504.cc-购彩网7798-| www.730017.com-生彩宝手机版| www.25609.com-彩票平台套利| www.vk41.com-大彩鲸彩票网| www.105090.com-靠谱彩票软件| www.90nw.com-篮球博彩软件| www.8803.vip-上海五星体育竞彩| www.55399.com-英国彩票-| www.026306.com-三d走势图彩吧助手| www.136636.com-贵宾室彩票用户注册| www.239220.com-江苏快三99彩正规| www.870224.com-正规的快三app| www.3447.cm-福彩三地八卦速查表| www.12bs.cc-肥东体彩大奖| www.265789.cc-时时彩推波倍投计算| www.24049.cc-台湾公益福星彩| www.9555.in-金禾娱乐彩投| www.061488.com-我附近彩票站点| www.111714.com-彩票七天乐-| www.051897.com-足彩群-| www.231877.com-安徽快三精准预测| www.305309.com-彩票35期开奖| www.147744.com-彩之堂网站-| www.483189.com-好彩台-| www.569930.com-七彩虹主板u盘启动| www.673212.com-481彩票倾家荡产| www.778205.com-快三客户端下载| www.865115.com-华彩平台是什么| www.946757.com-彩钢围挡怎么施工| 购彩在线www.66332m.com| www.1455.net-彩票北京pk10| www.680899.com-高频彩票害人不浅| www.766655.com-东莞彩乐糖果厂| www.376609.com-今晚3d怪字彩吧图| www.395312.com-今天福彩3d的号码| www.65ud.com-365家彩网-| www.81403.com-福彩北京pk-| www.28736.cc-福彩3d布衣独胆王| www.87433.com-深圳天天彩票网|