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.8689.in-彩票开奖查询28期| www.265239.com-3d彩票技巧大揭秘| www.135592.com-早上买彩票的人多吗| www.186187.com-各种釉彩大瓶| www.2544.net-51时时彩官方网站| www.976268.com-郑州市区彩礼多少钱| www.is25.com-17彩票合法吗| www.8669.com-历史福彩开奖| www.118573.com-境外彩票网站制作| www.510407.com-文艺的夸人的彩虹屁| www.613416.com-七星彩有哪些软件| www.697727.com-彩仙散胆专家专栏| www.492255.com-彩票试玩账号兼职| www.945446.com-福建体彩双色球开奖| www.062713.com-8体彩屋app-| www.5638.vip-微信群跟着买彩票| www.329661.com-美国彩票十大巨奖图| www.0811.cm-彩票江苏快三怎样买| www.144948.com-彩票出票员-| www.903485.com-彩票球app-| www.025618.com-彩运彩票网官方网站| 亿龍彩票www.1368m.cc| www.l10.in-怎么看走势图买彩票| www.68kf.com-网易体彩是真的吗| www.2299.cm-快三的和值-| www.8557.cm-大象彩票官网登录| www.990986.com-5分快三开奖| www.fn06.com-竞彩足球计算器| www.13en.com-好彩1出号走势| www.8906.vip-竞彩买比分的绝招| www.602290.com-乐彩客下载安装| www.023730.com-一分彩是官方的吗| www.158439.com-体彩店可以买北单吗| www.696357.com-时时彩官方开奖公告| www.877126.com-体彩排列五速查表| www.2532.org-彩票k线图预测| www.90461.com-76c彩票线路检测| www.34120.com-体育彩票上海| www.010668.com-5星彩app-| www.622737.com-官方快三下载安装| www.693691.com-728彩票官方网站| www.64889.com-成都彩钢围挡| www.636008.com-查询七星彩开奖号码| www.030938.com-永乐娱乐彩票| www.332275.com-彩票平台输钱| www.889739.com-nba体彩哪里买| www.987128.com-大连快三开奖结果| www.529112.com-彩虹秦时明月下载| www.681329.com-网赌彩票平台有哪些| www.wl59.cc-爱彩票网站-| www.34tq.com-七星彩没开过的码| www.360079.com-天易彩票平台漏洞| www.0370.cc-快乐彩助手-| 亿万彩票www.771247.com| www.216912.com-网上快三靠谱吗| www.816803.com-中华彩票客户端| www.131112.com-环彩网appios| www.286040.com-正彩彩票网站| www.538023.com-国彩信息一体机| www.va93.com-彩票中奖查训| www.j74.cn-i8彩票导航-| www.586424.com-天天中彩票官方网站| www.985036.com-福利彩票真有人中吗| www.019545.com-安顺市彩票管理中心| www.132576.com-彩票哪个app靠谱| www.np47.com-彩票大小走势分析| www.03le.com-足彩投资宝典电子书| www.64sr.com-足彩14场购彩技巧| www.0518.top-中科公益彩票| www.055123.com-彩色的梦教学反思| www.807881.com-优彩彩票是合法的吗| www.877458.com-r8国际彩票-| www.555348.com-app计划彩-| www.9463.vip-中国人在境外买彩票| www.609143.com-香港赛马会派彩结果| www.709618.com-彩票网站诈骗| www.777257.com-彩票软件华彩真品牌| www.287612.com-售彩-| www.973236.com-彩虹哥qq-| 500万彩票www.967333a.com| www.911.tv-彩票中奖金符咒法| www.079094.com-足彩过关方式4x4| www.188802.cc-新内蒙快三-| www.114424.com-什么彩票app好用| www.210012.com-彩票旗舰网合买大厅| www.478658.com-深圳彩票事件| www.620328.com-美国的彩票怎么买| www.812611.com-最新的彩票书籍| www.894304.cc-天天彩票集团app| 易彩网www.686pp.com| www.56ot.com-博友彩软件靠谱吗| www.34ff.com-彩票摇摇机-| www.2596.cn-时时彩网络诈骗案例| www.650901.com-水彩初学者临摹图片| www.0029.site-中了彩票的低调说说| www.495002.com-博彩短信-| www.581670.com-体彩7星开奖号| www.639761.com-牛牛创天下彩票| www.365474.cc-中国体彩福彩| www.002333.com-足球竞彩胜平负玩法| www.134519.com-好彩香烟双爆珠买| www.223937.com-一分快三技巧规律| www.356301.com-玩彩票wancai| www.3430.vip-官方高频彩有哪些| www.40401.cc-彩票碎了还能兑| www.907890.com-合肥彩票店铺转让| www.990006.com-彩票有多少个数字| www.qj51.com-好彩二复式注数计算| www.404618.com-七星彩奇偶对冲规则| www.964405.com-31体育彩票走势图| www.706234.com-发彩网刷彩金| www.131516.com-七乐彩设奖表| www.574300.com-体育彩票计算| www.656001.com-王文军买彩票方法| www.853468.com-皇冠国际彩票| 大赢家彩票网www.178387.com| www.7687.cm-胜负彩一手机新浪网| www.185995.com-广西福彩快3| www.893519.com-财政部彩票-| www.983896.com-518竞彩店app| www.12yi.com-福彩彩吧图谜第三版| www.542563.com-快三中奖软件| www.611381.com-福彩5加1多少钱| www.680963.com-海南七星彩诈骗新闻| www.760133.com-买彩票提成多少| www.829628.com-众达彩票app| www.894247.com-c9彩票app下载| www.952241.com-希望彩票注册邀请码| www.993361.com-足彩竞猜世界杯| www.zm8.com-吉林快三计划| www.530223.com-多彩网开奖开奖结果| www.873837.com-3d彩票玩法介绍| www.970461.com-彩票带单的怎么赚钱| www.fk53.com-湖北快三开奖定牛| www.866615.com-收今天彩票开奖号码| www.687208.com-体彩竞猜app| www.778990.com-第一彩票网-| www.877751.com-六台彩迷宫猪年有景| www.181080.com-今天福彩快3走势图| www.264793.com-快三彩票中国福彩| www.354466.com-天天爱彩票下载软件| www.eg22.com-福建官方体彩网| www.21675.cc-彩票店老板微信号| www.02828.com-ok彩票是正规的吗| www.349707.com-网上彩票违法吗| www.412178.com-福彩开奖日-| www.16387.com-澳客彩网官网电脑版| www.393205.com-昨天晚上的福彩| www.521587.com-合肥快三跨度走势图| www.586160.com-彩票121开奖| www.643199.com-彩鳞-| www.500660.com-公司要求平分彩票0| www.625268.com-下载一定牛体育彩票| 来运彩票www.5688y.cc| www.mf23.com-江苏快三返奖率| www.293493.com-幸运彩网址-| www.680982.com-七星彩能赚钱吗| www.785688.com-体彩官方网站首页| www.333074.com-如何看懂各种彩票| www.700090.cc-彩票万彩网-| www.16565.com-广西快三有多少期| www.kn96.com-新浪足彩竞技风暴| www.41ld.com-广东体彩大乐透官网| www.2847.cn-彩虹糖蓝色什么意思|