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.mj55.com-快三和值和尾走势图| www.bm11.com-下载人人彩票| www.ty57.com-七星彩开奖直播观看| www.709407.com-广州体彩大乐透领奖| www.5400.vip-七彩星体育彩票| www.28939.com-福彩3d和值表| www.83910.com-足彩概率学-| www.081592.com-中彩票500的图片| www.208271.com-甘肃快三豹子预测| www.37uo.com-有七星彩平台吗| www.kt3.cc-江苏快三走势分析| www.428786.com-种彩那天-| www.049991.com-体彩排列五中一个号| www.181389.com-808彩票网加急版| www.cai0999.com太多的江苏快三骗局| www.34119.com-福彩快三走势图下载| www.104510.com-好彩紫色爆珠多少钱| www.4394.org-甘肃竞彩快三查询| www.279543.com-天津时时乐彩网| www.347646.com-苹果体彩软件下载| www.447745.com-福彩3d老杨说彩| www.621763.com-快三猜大小的玩法| www.742228.com-湖南省体育彩票| www.909858.com-乐彩吧下载-| www.260797.com-博众彩票11选5| www.362935.com-写自然景物彩虹作文| www.687958.com-下载福利彩票和安装| www.798632.com-福利彩票广东快乐彩| www.038818.com-合肥体育彩票中心网| www.392819.com-赵丽颖彩铅画| www.63tz.com-体育彩票3d开奖| www.79916.cc-福彩刮刮乐中金条| www.351291.com-江苏快三彩经网| www.456139.com-巴厘岛彩票网址| www.67667.com-党员中彩票怎么办| www.084568.com-彩70网址-| www.184384.com-福彩3d开机号| www.jg34.com-大发快三的技巧规律| www.708373.com-c彩61计划合法吗| www.846757.com-彩票图彩在线| www.983997.com-时时彩反水什么意思| www.sv85.com-佛法求财中彩票| www.44vd.com-uc彩票靠谱吗| www.475660.com-彩票平台是不是假的| www.569996.com-彩票三d开奖多少钱| www.650939.com-9928彩票注册| www.286962.com-9购十分彩江苏快三| www.790731.com-福彩3d精选列表| www.558333.com-海南博彩业放开| www.663914.com-nba体彩吧-| www.761542.com-好彩妹什么电视剧| www.902295.com-微信里能买彩票吗| 天下彩www.396990.com| www.vl56.com-中国体彩票开奖公告| www.021.online-福彩开将结果奖结果| www.988399.cc-彩票必中计划| www.ol53.com-模拟竞彩-| www.956507.com-富贵彩app-| www.s66.top-香港电脑彩正版资料| www.75jf.com-足彩不输不赢的方法| www.558635.com-足彩任九场开奖号码| www.019492.com-遵义市体育彩票中心| www.203759.com-快三彩票是骗人的吗| www.03238.com-怎么戒掉网上买彩票| www.89962.cc-下载彩票投注技巧| www.942785.com-分分时时彩手机软件| www.bz01.com-福利彩票往期查询| www.40788.com-1号娱乐彩票| www.770439.com-网络黑彩赌博刑案例| 500彩票www.50051s.com| www.113091.com-七乐彩好中吗| www.16324.com-彩客网是不是骗人的| www.167020.com-江苏快三计划群骗局| www.246722.com-山东快三走势| 500彩票网www.65707f.com| www.0ne.com-e球彩胜平负走势图| www.4322.cn-鑫彩网怎么注册| www.ds60.com-福彩三地-| www.xc49.com-亚洲彩票成立多久了| www.31qt.com-什么彩票周六开| www.458819.com-邪恶道全彩苇月海滩| www.556948.com-49c永利彩票注册| www.167511.com-江苏快三骗局曝光| www.267912.com-快三推荐号码湖北| www.355474.com-福甘肃快三彩开奖| www.534177.com-梦迷解图七星彩号| www.603775.com-阿彩帝凰之神医弃妃| www.671893.com-鞍山体彩转让信息| www.739869.com-澳门彩票公司如何| www.800560.com-卓易彩票平台| www.864342.com-彩票网站老是同ip| www.915778.com-体彩退押金需要多久| www.967178.com-足彩兑奖时间限制| www.cai8181.com一分快三的秘籍| www.198.bid-乐彩站是赌博的吗| www.8950.org-盛兴彩票v3官网| www.8133.cm-上海雅彩鱼缸| www.597959.com-福利彩票投注站收入| www.864438.com-新彩网手机版下载| www.98565.cc-qq5分彩-| www.924950.com-全民赢彩票几个版本| www.976745.com-全国结婚彩礼排行榜| www.cai96.com-今天广西快三开奖| www.136226.com-成功彩票怎么样| www.197958.com-快三如果躲避长龙| www.56439.cc-2018福彩助学| www.e62.club-海南七星彩头尾码王| www.591745.com-彩票中奖怎么花| www.d65.me-123彩票能信吗| www.38zm.com-彩铅房子风景画图片| www.1654.cc-福彩布衣胆码| www.6774.biz-福彩快5玩法| www.28143.com-体彩店开业宣传语| www.ot37.com-手机上玩彩票合法吗| www.38jz.com-亿彩娱乐骗局| www.215990.com-众赢彩票骗局| www.22152.com-玩时时彩输死了| www.886469.com-微信上下分中华彩| www.959751.com-彩61彩票官方网站| 8号彩票www.60108j.com| www.781.win-神牛福彩双色球| www.05096.com-小鹿工具重庆时时彩| www.500012.cc-仙游时时彩停了吗| www.5050.gg-长沙福彩中奖| www.790802.com-彩票机选号软件| www.883772.com-博彩王彩票分析| www.978979.com-上海体彩网彩票| www.81071.com-体彩机子怎么用| www.057428.com-彩票双色球出啥数字| www.229586.com-吉林快三号码口诀| www.949881.com-百宝彩票快三| www.813196.com-福彩3d遗漏走势图| www.577863.com-重庆分分彩官网网址| www.813956.com-快购彩票3最新| www.985264.com-ag快彩是什么| www.zu31.com-彩虹六号手机版下载| www.6780.biz-三d彩票玩法| www.tl41.com-冮苏快三走势图| www.901237.com-福彩独胆杀号3d| www.07ud.com-七星彩最新番外| www.0662.tv-福利彩票30选七| www.8580.cn-淅冮体彩6十l号码| www.06232.com-福彩3d胆码技巧| www.067776.com-彩票老司机这app| www.102335.com-彩票计划大全网站| www.206528.com-有没有好的彩票平台| www.069064.com-彩票高手完整视频| www.150132.com-游戏机彩票纸干嘛用| www.mu51.com-最正规的购彩平台| www.323346.com-七彩开奖结果今晚| www.543083.cc-福彩千禧试机号排三| www.670712.com-彩票开奖全部信息| www.248966.com-官彩有哪些-| www.64514.com-风云彩票精华b版| www.006944.com-赢彩助手3d试机号| www.264.cn-韩国lotto彩票| www.138018.com-江苏快三买大小| www.320308.com-休肓彩票7位数| www.389987.com-彩票奖池排行榜| www.91yz.com-伍佰万彩票网电脑版| www.315374.com-彩虹棋牌比机有挂吗| www.68662.com-彩坛至尊下载| www.047813.com-江苏体育彩票| www.u48.com-快频彩稳赢-|