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.035355.com-幸运快三走势图表| www.6595.vip-姓名选号彩票| www.55096.com-最新双色球彩票软件| www.430.hk-重生彩票中奖的小说| www.083282.com-彩票电子报纸| www.549304.com-网上还能买足彩吗| www.646842.com-彩票高人谈彩票| www.743588.com-中彩网擂台赛图表| www.839767.com-中国福利彩票图纸| www.919340.com-彩票平台架设搭建| www.982225.com-3d福利彩票字谜| www.ba88.com-江西福利彩票兑奖| www.268027.com-求668彩票邀请码| www.347455.com-成语添光溢彩| www.324533.com-365cc彩票网| www.449755.com-福彩湖北30选5| www.md59.com-爱乐彩时时彩推荐号| www.282820.com-体育彩票7星彩规则| www.jo45.com-套彩金违法吗| www.g40.org-彩宝贝排列三定3跨| www.73vl.com-简单彩铅画荷花教程| www.1508.cn-福彩快乐彩开奖号码| www.097899.com-安装万彩吧-| www.237822.com-湖南福彩网官方站| www.634588.com-利博彩票骗局| www.737009.com-体育彩票软件快三| www.830817.com-注册送彩金的棋牌| www.915799.com-加盟福利彩票赚钱吗| www.986135.com-竞彩蓝球专家推荐号| www.49kl.com-49官方彩票网| www.020545.com-上海福彩快三下载| www.911248.com-k彩手机客户端| www.319591.com-博友彩票安卓下载| www.353411.com-排列三牛彩预测汇总| www.473325.com-南京鼓楼区彩票| www.569592.com-七乐彩连线走势图| www.685200.com-福彩3d多邦预测| www.499037.com-刷彩金的平台| www.584434.com-888彩票平台快3| www.668350.com-3d彩票定时器| www.758736.com-w微彩下载-| www.ym17.com-乐购彩app-| www.o15.org-怎样看彩票走势图解| www.948539.com-快三群骗局流程| www.cp52.com-中国体彩湖北快三| www.vs37.com-三宝乐购彩票合法吗| www.15jw.com-体育彩票出的什么号| www.3083.com-澳葡风彩开奖| www.125267.com-福彩出奖号今天| www.y10.me-时时彩趋势软件| www.475789.com-广东快乐彩玩法介绍| www.696962.com-金鹰团队时时彩计划| www.814605.com-仙彩-| www.962928.com-下载星光彩票| www.hf78.com-手机106彩票下载| www.p17.net-微信提现彩票| www.162810.com-彩票大全走势图| www.273239.com-福彩改企-| www.360537.com-网易快三怎么看| www.8421.pw-七星彩中三个连号| www.72375.com-博彩奔驰宝马网址| www.17672.cc-505彩票官网| www.82500.cc-体彩排列三杀一码| www.699875.com-夏津彩客上几个小时| www.863598.com-体育彩票发行中心| www.10kk.com-256c彩票-| www.6366.in-体彩有多假-| www.132671.com-最好的彩票网站| www.276260.com-博彩返水是什么意思| www.372131.com-合肥体育彩票中心| www.261068.com-尊彩网是真的假的| www.937903.com-云彩厅彩票是真的吗| www.as18.com-湖北福彩网中奖公告| www.6606.cn-七天彩邀请码| www.27125.com-彩票2元网怎么下载| www.66801.com-体育彩票好卖吗| www.659884.com-2018官方分分彩| www.571685.com-天天乐彩票快3| www.400076.com-全民彩票500网| www.641991.com-彩票方格-| www.0528.net-福彩千禧试机号排三| www.w48.bid-彩票256提现不了| www.329721.com-山西省体彩兑奖地址| www.469107.com-彩票诈骗立案标准| www.597542.com-彩尊安桌版下载| www.447723.com-发微信买彩票中奖| www.1907.in-福彩机器人价格| www.243643.com-鸿彩票软件-| www.739895.com-福彩能网上购买吗| www.874386.com-重庆实时彩计划| www.967844.com-中港彩票网址| www.449891.com-时时彩三星复式计划| www.640368.com-麦久彩票网东方红| www.993257.com-博雅彩票正规吗| www.kj62.com-彩37app-| www.565945.com-一线彩库-| www.947072.com-高频彩停售-| 博乐彩票www.665771.com| www.tz01.com-彩票123安卓下载| www.xe84.com-7彩国际是真的吗| www.868425.com-七星彩图纸最新| www.05119.com-有些什么彩票软件| www.959290.com-彩民彩吧-| www.635730.com-a7彩娱乐下载| www.gj09.com-快三秒珍珠奶茶| www.504309.com-人生没有彩排感悟| www.12mi.com-九州彩票怎么样| www.387926.com-下彩彩票apk| www.272569.com-吉林快三开奖视频网| www.623501.com-广州鸣彩国际拍卖| www.278938.com-体彩排列三今天独胆| www.61350.com-网络购彩怎么举报| www.248907.com-137彩票app-| www.473101.com-福利彩票营业时间| www.90116.com-七彩网络平台注册| www.99717.com-手机版彩6-| www.js9.com-体彩河南泳坛夺金| www.6ro.com-发发彩票网图库大全| www.00qk.com-广西快三是传销吗| www.jo75.com-蜂鸟团队彩票| www.288712.com-内蒙快三今日开奖| www.397208.com-中彩网高手社区| www.gc44.com-新快三恐龙快打| www.916.space-福彩站的收益怎么看| www.393385.com-彩票最高返点| www.503937.com-买高频彩算投资吗| www.653311.com-8炫彩什么时候发行| www.400478.com-彩票开足彩奖| www.35587.cc-超级彩票助手电脑版| www.468263.com-百姓彩票提现| www.382011.com-分分彩挂机不爆方案| www.392921.com-香港赛马派彩与结果| www.433666.cc-贵州彩民7000万| www.262263.com-快三遗漏河北| www.880074.com-福利彩票网址| www.959652.com-彩票内部计划| VIP彩票www.79800a.com| www.298078.com-兰州快三开奖推荐| www.600866.com-现在都买什么彩票| www.cs39.com-我爱彩票大发快3| www.59qy.com-众彩乐11选五| www.732786.com-体彩19052-| www.897069.com-竞彩足彩500网| www.12xb.com-完美彩票咋样| www.866567.com-天津时彩开奖记录| www.939778.com-彩票捡漏-| www.975876.com-驻马店正阳县彩礼| www.kp2.cc-快三牛开奖内蒙| www.lt01.com-时时彩宝典下载| www.ye00.com-全新韩国快三| www.38ou.com-彩铅玫瑰排线技巧| www.529506.com-刮彩票直播-| www.682530.com-体彩竞彩微信群| www.752377.com-中彩国际彩票学院| 非凡彩票www.77210h.com| www.861999.com-吉林快三精准计划网| www.cai6155.com彩票甘肃快3| www.952783.com-风彩彩票官方网站| www.538674.com-玩网络彩怎么必赢| www.38uc.com-19043七星彩| www.918196.com-分分快三私彩| www.4411.biz-贩卖私彩构成什么罪| www.897178.com-时时彩长龙提醒官网| www.965864.com-新国际彩票app|