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.71696.com-福彩3d彩涂今日| www.075611.com-7彩论文网-| www.485008.com-93彩票平台-| www.268869.com-go彩票违法吗| www.234310.com-彩票的真实性| www.416886.com-彩虹6号游戏图标| www.554150.com-熊猫彩票官网| www.731513.com-河北福利彩票中心| www.4114.vip-七星彩局王奖表下载| www.65qy.com-众彩网黑蝴蝶预测| www.2025.net-河南福彩豫彩通助手| www.57788.cc-中彩票706-| www.14yh.com-七星彩图片168| www.0415.net-迪士尼彩乐园彩票| www.6688.net-七彩国际美容丰台| www.8121.cc-彩票网站会泄露| www.11472.com-彩乐网手机版| www.am60.cc-彩71用户注册| www.xh63.cc-彩虹5无人机| www.698306.com-简短描写彩虹的句子| www.5062.cn-世界杯足彩彩票| www.50114.cc-体彩p3试机号走势| 天天彩票www.106135.com| www.9010.vip-排列五走势彩宝网| www.10584.com-足球彩票大奖| www.916225.com-时时彩注册送38元| 博通彩票www.606647.com| www.xg23.com-977彩票ios-| www.468585.com-易点彩票字谜大全| www.589415.com-河南快三开奖规则| www.226762.com-快捷彩票app| www.35637.com-吉祥彩最新登录平台| www.31795.cc-足彩19043-| www.11959.cc-中国竞彩赛果| www.61310.com-唯彩会福彩大师| www.042846.com-彩票充值假聊| www.730926.com-海宁福彩店转让信息| www.836619.com-彩娃彩票公司| www.928309.com-趣彩彩票官网| www.987164.com-彩店宝彩票可靠吗| www.qk4.com-惠民乐彩票-| www.sy55.cc-七星彩中奖规则图片| www.30tx.com-彩虹授权商查询| www.749582.com-909彩票官网| www.886996.com-相亲彩票-| www.986732.com-北京快三的玩法| www.mp14.com-时时彩后一稳赚公式| www.76ov.com-菏泽福利彩票电话| www.452828.com-全国有多少彩票站| www.uu33.cc-体彩网站官网站| www.60yv.com-一分彩票快三预测| www.2535.cn-玩彩票的方法与技巧| www.4333.vip-鑫得彩票-| www.355796.com-龙之彩app-| www.57uz.com-7o3彩票首页| www.131162.com-河南体彩排三| www.131041.com-林州彩礼-| www.6899.tv-七彩野山鸡市场价| www.66512.com-七乐彩在线中奖查询| www.3630.vip-体彩客服电话| www.ph54.com-网上买彩票很多| www.76uj.com-彩票图表走势大全| www.679877.com-至尊彩是不是黑平台| www.787055.com-竞彩单场分析预测| www.0234.org-怎样做彩票的销售| www.f20.cc-七星彩开结果奖今天| www.839320.com-唯彩会老盘推荐足彩| www.994052.com-福彩3地丹东图谜| www.808511.com-网上彩票贴吧| www.891982.com-1分时时彩-| www.982669.com-个人彩票软件| www.bc60.com-上海天天彩选四开奖| www.344488.com-盈彩票-| www.438607.com-遵义彩票店-| www.772857.com-大发时时彩软件安卓| www.587918.com-彩色复印机租哪家好| www.720096.com-购买足彩技巧经验| www.uc98.com-三分彩走势图| www.2368.shop-七彩影院安全吗| www.389931.com-彩票中奖方法传奇| www.562908.com-彩坛之王-| www.807107.com-体彩纸-| www.399941.com-网上在哪买体彩| www.915693.com-开体彩店要多少钱| www.793139.com-福利彩票最大的赌博| 幸运彩票www.luck808.com| www.653608.com-福彩3d1月3-| www.889203.com-快乐彩票则么玩| www.iw5.cc-彩票选号助手下载| www.77088.com-团彩官网app| www.310775.com-掌上彩票-| www.383688.com-山西彩票20选8| www.p23.com-微博彩票游戏| www.657539.com-亿彩苹果下载软件| www.610393.com-快三和值怎么买| www.697272.com-辽宁全运彩开奖| www.776024.com-我玩时时彩输的想哭| www.2398.net-青畦彩票-| www.38083.com-红彩app直播下载| www.69624.com-足彩新浪比分直播| www.851873.com-乐米彩票中一等奖| www.994953.com-体育竞彩足球让分| www.sw26.com-福彩开奖直播频道| www.168646.com-湖快三走势图| www.4851.cm-山西福彩中奖| www.264234.com-彩票头奖几率| www.630918.com-海南飞鱼彩票软件| www.988377.com-副利彩票开将结果| www.23470.com-瑞彩彩票安卓下载| www.643133.com-304彩票-| www.301523.com-上海快三app| www.81999.cc-真人cs实战彩票| www.186014.com-湖北快三结果今天| www.362899.com-高频彩投注平台| www.772264.com-荣鼎彩有谁黑过| www.416800.cc-意式彩虹冰淇淋机| www.966257.com-即开彩app靠谱吗| www.c10.net-彩票pc蛋蛋软件| www.66462.com-亿乐彩提现不成功| www.127543.com-彩虹宝宝歌词| www.828259.com-红包彩票主播火火| www.822372.com-冠盈娱乐彩票官网| www.025875.com-福彩真精华布衣1| www.44539.com-体彩87-| www.2771.bid-c01彩票-| www.61191.com-购彩堂app下载| www.ec5.cc-网上彩票五分钟一开| www.289327.com-福彩快三顺子多少钱| www.24ou.com-手机彩膜制作| www.6542.cn-领先彩票app下载| www.96676.com-944c彩票-| www.179910.com-新快三走势图| www.350047.com-买彩票疯狂-| www.27001.cc-彩票团队qq群| www.85732.cc-彩票网页版-| www.332350.com-体彩店买双色球吗| www.69213.com-彩票平台输钱怎么办| www.66lh.com-288彩票可靠吗| www.18146.com-湖南福彩官网首页| www.891140.com-幸运快三走势图表| www.55373.cc-国外时时彩-| www.497780.com-快乐中彩票是真的吗| www.401329.com-快频彩票免费下载| www.518474.com-中彩网双色球金码| www.21yr.com-喜来登彩票下载安装| www.460025.com-彩票游戏怎么玩法| www.559112.com-江苏福彩自助终端| www.609175.com-彩票点几点下班| www.662244.com-彩民网最快最准资料| www.723577.com-常州1800万彩票| www.166367.com-快三算号神器| 500彩票www.670477.com| www.re05.com-时时彩怎么计算| www.40ww.com-2019七星彩大奖| www.zv94.com-竞彩彩票店限制| www.307488.com-派彩电子走势图电脑| www.077813.com-百宝彩账号怎么注册| www.85eq.com-取缔高频彩票| www.35626.com-亿发彩票下载| www.74988.cc-河内时时彩官网地址| www.009518.com-天下彩彩友网| www.835113.com-好彩绿好抽吗| www.893678.com-可2角买彩票网| www.965450.com-体育彩票是什么|