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.525036.com-福彩3d太湖图谜版| www.883124.com-多彩投官网电话| www.xh89.com-7彩娱乐注册| www.10.win-神彩嘉宾排三断组| www.22784.cc-大型的彩票软件| www.515790.com-彩票奖券纠纷| www.6080.la-釉上彩瓷器的要点| www.52787.com-七彩虹sl300| www.262813.com-中国合法的彩票种类| www.372370.com-作弊重庆时时彩| www.329323.com-贵州彩票中奖新闻| www.954872.com-印尼五分彩-| www.ib2.cc-福彩新快3走势图| www.ty80.com-彩票跟龙屠龙| www.365969.com-海底世界彩铅画图片| www.487255.com-足彩大小球分析教程| www.569396.com-彩票免费赠送彩金| www.665822.com-七乐彩查询中奖查询| www.751290.com-彩票破了可以兑奖| www.829206.com-k3彩票邀请码| www.905792.com-众网彩票是骗局吗| www.968015.com-西安宝马彩票造假| www.ih7.com-快乐彩22-| www.pw36.com-快三砍龙什么意思| www.47qk.com-广西福彩领奖流程| www.27pq.com-男子捡到过期彩票| www.1884.vip-四场进球彩对阵单| www.8188.com-天空彩票幻彩门户| www.511716.com-彩票对打分红| www.33pz.com-昨天开奖的七星彩| www.3030.in-逸彩老师-| www.10764.com-买福利彩票违法吗| www.477666.cc-萍乡福彩中心| www.566767.com-谁被k8彩票黑过的| www.648658.com-25号彩票开奖查询| www.362389.com-彩虹的人生励志句子| www.478152.com-大中华彩票首页| www.554993.com-彩票中4亿-| www.616058.com-万榑彩票-| www.659094.com-体彩福彩群-| www.939952.com-彩票福彩双色球| www.cai6663.com长春快三开奖号| www.513653.com-福彩3d断组绝招| www.662888.cc-彩33app-| www.757822.com-菲律宾优游彩票平台| www.888004.com-彩票推荐网站哪个好| www.981448.com-竞彩任九必杀宝| www.kf84.com-网彩导航-| www.v23.xyz-南洋乐和彩公告| www.51xn.com-德州好彩-| www.836.me-天下彩-| www.4784.com-38在线彩票-| www.13393.cc-竞彩8场2关-| www.65228.cc-福彩双色球预测总汇| www.065608.com-重庆福利彩票中汽车| www.204838.com-河南幸运彩票走势图| www.322709.com-国彩网-| www.967341.com-正规彩票微信合买群| www.jf1.cc-中福快三是正规的吗| www.tj70.cc-乐炫彩票网址| www.2901.vip-彩之家诈骗-| www.753044.com-3d高频彩是什么| www.951395.com-彩票aqq排行榜| www.999364.com-哪个足彩好中| www.np26.com-福彩双色球随机选号| www.y87.org-彩漫福利本子图片| www.58jv.com-中国彩票客户端下载| www.0709.com-体彩福彩要取消吗| www.769601.com-好彩中免绿-| www.882454.com-英国5分彩是骗局吗| www.981785.com-老古董珐琅彩机械钟| www.nl62.com-足彩比分直播网| www.8yz.cc-彩票一般是几点买| www.66we.com-大彩网机器人双色球| www.2063.cn-加拿大彩票开奖| www.7523.cn-36o足球竞彩| www.607779.com-韩国彩票中奖号| www.682770.com-大胜彩票-| www.779407.com-福彩开奖预测结果| www.860598.com-黑龙江省体彩11| www.915079.com-中园体彩网-| www.968121.com-希腊时时彩开奖软件| 500万彩票www.98528f.com| www.69911.cc-百盈快三助赢软件| www.056966.com-七星彩怎么才算中奖| www.130.tv-彩票在线计划稳赢| www.3814.in-足彩310报纸| www.8996.biz-凤凰彩票哪个是真的| www.612006.com-彩票店加盟在多少钱| www.680129.com-彩票2元元网| www.22311.com-e彩手机版下载| www.265458.com-宁夏快三和值走势图| www.776658.com-亿彩堂app怎么样| www.902306.com-怎么做到赢黑彩| www.772007.com-彩票自动投注app| www.y30.shop-下载彩票行家com| www.80be.com-105彩票红包有抢| www.964491.com-福利彩票计算器| www.tp39.com-安徽快三遗漏走势| www.566747.com-河南福彩网站| www.659473.com-彩票大乐-| www.777148.com-3分快三怎么看规律| www.852139.com-体育彩票排列5玩法| www.937171.com-体彩新浪彩票网| www.990762.com-好彩票专业版安卓版| www.db27.com-快三中彩网apk| www.wj33.com-开彩吧-| www.08pz.cc-长沙体彩代理| www.71kc.com-体彩排列三字迷图迷| www.1376.tv-高频彩16号关闭| www.298386.com-冀彩宝还能用吗| www.425893.com-一般体彩店转让多钱| www.565667.com-爱彩通走势图电脑版| www.659982.com-彩票预测分析软件| www.848393.com-众彩网官网-| 500彩票www.50054b.com| www.0359.date-宴飞华休闲快三教学| www.024030.com-六台彩迷宫12| www.77et.com-可以投一分钱的彩票| www.531981.com-五鬼运财中彩票| www.394306.com-七乐彩大奖兑奖流程| www.739194.com-快三和值三最大遗漏| www.7hn.com-彩票是内部人中的吗| www.752713.com-彩票挂机赚钱软件| www.908426.com-彩票七星彩-| www.972516.com-彩铅画明星-| www.cai3902.com江苏e球彩开奖号码| www.iu90.com-福彩兑奖规则| www.xg49.com-提前开奖器彩票| www.07ts.com-水彩星空画-| www.831110.com-三分幸运快三技巧| 快彩在线www.2632y.com| www.292653.com-福彩太湖字谜| www.990065.com-澳客彩票缩水软件| www.sb01.com-红牛彩票网站真假| www.0669.org-中国体彩申请| www.99667.com-常常中体彩店app| www.26947.com-新浪彩票最新版| www.60670.com-南岸区体彩办| www.789566.com-竞彩什么情况出平局| www.891234.cc-幸运时时彩计划网页| www.991579.com-百宝彩电视走势图| www.ka6.com-江苏快三走势形态图| www.ym14.com-神圣彩票登录| www.968841.com-9彩彩票ios-| 幸运彩票www.768299.com| www.530033.com-掌上彩票打不开| www.616793.com-亚上彩官方-| www.691761.com-三分彩人工免费计划| www.50ox.com-九龙彩票下载安装| www.0668.site-彩票机卡纸怎么弄| www.6518.biz-富华彩票53330| www.252593.com-福彩代理怎么拿提成| www.318250.com-水彩抽象画创意| www.378179.com-3d福彩出奖号| www.fh48.com-大众彩票计划网| www.558442.com-星空的画法彩铅教程| www.659454.com-皇都彩票一微信转账| www.763552.com-一定牛竞彩-| www.863065.com-彩票51-| www.921926.com-今晚齐鲁彩票| www.981450.com-什么是彩票返点| www.cai849.com-快三秒是什么| www.885611.com-天下好彩彩团网|